diff --git a/admin/css/wp-allstars-admin.css b/admin/css/wp-allstars-admin.css index 75574da..d036a9d 100644 --- a/admin/css/wp-allstars-admin.css +++ b/admin/css/wp-allstars-admin.css @@ -1074,7 +1074,7 @@ body.wp-admin .button.pricing-button:hover, #recommended .plugin-card .name, #recommended .plugin-card .desc { margin-left: 84px; - margin-right: 120px; /* Ensure description doesn't overlap buttons */ + margin-right: 130px; /* Increase right margin to prevent text from going behind buttons */ } #recommended .plugin-card .name h3 { @@ -1101,6 +1101,7 @@ body.wp-admin .button.pricing-button:hover, flex-direction: column; align-items: flex-end; gap: 8px; + padding-right: 20px; /* Add padding to give text more space */ } #recommended .plugin-card .plugin-action-buttons { @@ -1137,7 +1138,7 @@ body.wp-admin .button.pricing-button:hover, justify-content: center; } -/* Responsive adjustments - maintain single column but adjust padding */ +/* Responsive adjustments - improve mobile layout */ @media screen and (max-width: 782px) { #recommended .wpa-plugin-container { padding: 16px; @@ -1145,35 +1146,44 @@ body.wp-admin .button.pricing-button:hover, #recommended .plugin-card { padding: 16px; + position: relative; } #recommended .plugin-card .name, #recommended .plugin-card .desc { margin-right: 0; /* Allow full width on mobile */ - margin-bottom: 60px; /* Space for action buttons below */ } #recommended .plugin-card .action-links { - position: absolute; + position: relative; + width: 100%; top: auto; - bottom: 15px; - left: 16px; - right: 16px; - width: auto; + right: auto; + padding-right: 0; + margin-top: 16px; flex-direction: row; + justify-content: flex-end; } #recommended .plugin-card .plugin-action-buttons { - width: 100%; + width: auto; + } + + #recommended .plugin-card .plugin-action-buttons .button { + width: auto; + min-width: 120px; } } /* Extra small screens */ @media screen and (max-width: 480px) { + #recommended .plugin-card { + padding-top: 80px; /* Add space for icon */ + } + #recommended .plugin-card .name, #recommended .plugin-card .desc { margin-left: 0; - margin-top: 80px; /* Space for icon above */ } #recommended .plugin-card .plugin-icon { @@ -1182,6 +1192,19 @@ body.wp-admin .button.pricing-button:hover, left: 16px; float: none; } + + #recommended .plugin-card .action-links { + flex-direction: column; + align-items: stretch; + } + + #recommended .plugin-card .plugin-action-buttons { + width: 100%; + } + + #recommended .plugin-card .plugin-action-buttons .button { + width: 100%; + } } /* Style compatibility message */ diff --git a/admin/css/wp-allstars-plugins.css b/admin/css/wp-allstars-plugins.css index a2fa65d..68669eb 100644 --- a/admin/css/wp-allstars-plugins.css +++ b/admin/css/wp-allstars-plugins.css @@ -78,10 +78,10 @@ margin: 0 20px 0 0 !important; } -/* Name and description positioning */ +/* Name and description positioning - improved text wrapping */ .name.column-name { margin: 0 0 12px 84px !important; - margin-right: 120px !important; /* Ensure no overlap with action buttons */ + margin-right: 130px !important; /* Increased to prevent text going behind buttons */ } .name.column-name h3 { @@ -90,11 +90,12 @@ line-height: 1.4 !important; margin: 0 0 12px !important; color: #1d2327 !important; + word-wrap: break-word !important; /* Ensure text wrapping */ } .desc.column-description { margin: 0 0 16px 84px !important; - margin-right: 120px !important; /* Ensure no overlap with action buttons */ + margin-right: 130px !important; /* Increased to prevent text going behind buttons */ font-size: 14px !important; line-height: 1.6 !important; color: #50575e !important; @@ -110,6 +111,7 @@ flex-direction: column !important; align-items: flex-end !important; gap: 8px !important; + padding-right: 20px !important; /* Added padding to give text more space */ } .plugin-action-buttons { @@ -147,7 +149,7 @@ z-index: 100; } -/* Responsive Adjustments */ +/* Responsive Adjustments - improved mobile layout */ @media screen and (max-width: 782px) { .wp-allstars-wrap #wpa-plugin-list { padding: 16px; @@ -160,30 +162,38 @@ .name.column-name, .desc.column-description { margin-right: 0 !important; /* Allow full width on mobile */ - margin-bottom: 60px !important; /* Space for action buttons below */ } .action-links { - position: absolute !important; + position: relative !important; + width: 100% !important; top: auto !important; - bottom: 15px !important; - left: 16px !important; - right: 16px !important; - width: auto !important; + right: auto !important; + padding-right: 0 !important; + margin-top: 16px !important; flex-direction: row !important; + justify-content: flex-end !important; } .plugin-action-buttons { - width: 100% !important; + width: auto !important; + } + + .plugin-action-buttons .button { + width: auto !important; + min-width: 120px !important; } } /* Extra small screens */ @media screen and (max-width: 480px) { + .plugin-card { + padding-top: 80px !important; /* Space for icon at top */ + } + .name.column-name, .desc.column-description { margin-left: 0 !important; - margin-top: 80px !important; /* Space for icon above */ } .plugin-icon { @@ -192,6 +202,19 @@ left: 16px !important; float: none !important; } + + .action-links { + flex-direction: column !important; + align-items: stretch !important; + } + + .plugin-action-buttons { + width: 100% !important; + } + + .plugin-action-buttons .button { + width: 100% !important; + } } /* Global plugin icon positioning that applies to all viewport sizes */