Fix presentation of plugin cards on mobile

Author: westonruter

includes/admin/load.php

@@ -303,13 +303,31 @@ function perflab_print_features_page_style(): void {
 		margin-left: 0;
 	}
 	.plugin-card-top {
-		/* This is required to ensure the Settings link does not extend below the bottom of a plugin card on a wide screen */
+		/* This is required to ensure the Settings link does not extend below the bottom of a plugin card on a wide screen. */
 		min-height: 90px;
 	}
+	@media screen and (max-width: 782px) {
+		.plugin-card-top {
+			/* Same reason as above, but now the button is taller to make it easier to tap on touch screens. */
+			min-height: 110px;
+		}
+	}
 	.plugin-card .perflab-plugin-experimental {
 		font-size: 80%;
 		font-weight: normal;
 	}
+
+	@media screen and (max-width: 1100px) and (min-width: 782px), (max-width: 480px) {
+		.plugin-card .action-links {
+			margin-left: auto;
+		}
+		/* Make sure the settings link gets spaced out from the Learn more link. */
+		.plugin-card .plugin-action-buttons > li:nth-child(3) {
+			margin-left: 2ex;
+			border-left: solid 1px;
+			padding-left: 2ex;
+		}
+	}
 </style>
 	<?php
 }