From 7f3e7cb94c38bf3d18aae6fe743f1adf363034d9 Mon Sep 17 00:00:00 2001 From: Marcus Quinn Date: Mon, 17 Mar 2025 03:24:05 +0000 Subject: [PATCH] Final UI fixes: Correctly position plugin icons at small screens, properly align action buttons with description text --- admin/css/wp-allstars-plugins.css | 23 +++++++++-------------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/admin/css/wp-allstars-plugins.css b/admin/css/wp-allstars-plugins.css index be4499c..7b8c4c3 100644 --- a/admin/css/wp-allstars-plugins.css +++ b/admin/css/wp-allstars-plugins.css @@ -85,17 +85,12 @@ /* Position action buttons to align with description */ body.wp-admin .plugin-card .action-links { - top: auto !important; - bottom: auto !important; - position: relative !important; - float: right !important; - margin-top: -45px !important; - margin-right: 20px !important; + top: 95px !important; /* Positioned lower to align with description text */ } - - /* Ensure description stays below the name and doesn't overlap with buttons */ + + /* Make description text stay below the name with proper margin */ body.wp-admin .plugin-card .desc.column-description { - clear: left !important; + margin-top: 10px !important; } } @@ -106,21 +101,21 @@ position: static !important; } - /* Force complete icon positioning for small screens */ - body.wp-admin .plugin-card .plugin-icon, + /* Force complete icon positioning for small screens using a more specific selector */ + body.wp-admin .plugin-card .plugin-card-top .plugin-icon, + body.wp-admin #the-list .plugin-card .plugin-icon, body.wp-admin .plugin-card img.plugin-icon { position: absolute !important; float: none !important; top: 20px !important; - left: 55px !important; /* Added 35px to the left position */ + left: 90px !important; /* Further increased left position to match required position */ margin: 0 !important; z-index: 10 !important; - border: 1px solid #ddd !important; } /* Adjust the name column for proper wrapping */ body.wp-admin .plugin-card .name.column-name { - margin-left: 110px !important; /* Adjusted for new icon position */ + margin-left: 145px !important; /* Adjusted to match new icon position */ padding-left: 0 !important; width: calc(75% - 155px) !important; }