feat: Enhance mobile responsiveness for container and modal styles in main and admin templates

This commit is contained in:
2026-04-17 19:18:46 +02:00
parent 20556f3500
commit 06c2270842
3 changed files with 43 additions and 30 deletions
+6 -4
View File
@@ -155,10 +155,12 @@ select:focus {
@media (max-width: 900px) { @media (max-width: 900px) {
.container { .container {
width: calc(100% - 18px); width: 100%;
padding: 14px; max-width: 100%;
margin: 10px auto; padding: 12px 12px 18px;
border-radius: 10px; margin: 0;
border-radius: 0;
box-sizing: border-box;
} }
} }
+11 -8
View File
@@ -3374,9 +3374,12 @@
/* Mobile-responsive styles for user interface */ /* Mobile-responsive styles for user interface */
.container { .container {
width: 95% !important; width: 100% !important;
margin: 10px auto !important; max-width: 100% !important;
padding: 15px !important; margin: 0 !important;
padding: 12px 12px 18px !important;
border-radius: 0 !important;
box-sizing: border-box !important;
} }
h1, h2 { h1, h2 {
@@ -3446,7 +3449,7 @@
display: grid !important; display: grid !important;
grid-template-columns: 1fr !important; grid-template-columns: 1fr !important;
gap: 15px !important; gap: 15px !important;
padding: 10px 0 !important; padding: 10px 0 0 !important;
overflow-x: visible !important; overflow-x: visible !important;
} }
@@ -3463,12 +3466,12 @@
/* Modal improvements for mobile */ /* Modal improvements for mobile */
.modal-content { .modal-content {
width: 95% !important; width: calc(100vw - 16px) !important;
max-width: 500px !important; max-width: none !important;
margin: 20px auto !important; margin: 8px auto !important;
max-height: 85vh !important; max-height: 85vh !important;
overflow-y: auto !important; overflow-y: auto !important;
padding: 20px !important; padding: 16px !important;
} }
/* Button improvements */ /* Button improvements */
+26 -18
View File
@@ -1237,9 +1237,11 @@
/* Mobile-responsive styles for admin interface */ /* Mobile-responsive styles for admin interface */
.admin-content-container { .admin-content-container {
width: 95% !important; width: 100% !important;
margin: 10px auto !important; max-width: 100% !important;
padding: 15px !important; margin: 0 !important;
padding: 12px 12px 18px !important;
box-sizing: border-box !important;
overflow-x: hidden !important; overflow-x: hidden !important;
} }
@@ -1363,11 +1365,12 @@
/* Modal improvements for admin */ /* Modal improvements for admin */
.modal-content { .modal-content {
width: 95% !important; width: calc(100vw - 16px) !important;
max-width: 500px !important; max-width: none !important;
margin: 20px auto !important; margin: 8px auto !important;
max-height: 85vh !important; max-height: 85vh !important;
overflow-y: auto !important; overflow-y: auto !important;
padding: 16px !important;
} }
/* Admin card improvements */ /* Admin card improvements */
@@ -1526,9 +1529,11 @@
/* Mobile-responsive styles for admin interface */ /* Mobile-responsive styles for admin interface */
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.admin-content-container { .admin-content-container {
width: 95% !important; width: 100% !important;
margin: 10px auto !important; max-width: 100% !important;
padding: 15px !important; margin: 0 !important;
padding: 12px 12px 18px !important;
box-sizing: border-box !important;
} }
h1, h2 { h1, h2 {
@@ -1615,12 +1620,12 @@
/* Modal improvements for admin */ /* Modal improvements for admin */
.modal-content { .modal-content {
width: 95% !important; width: calc(100vw - 16px) !important;
max-width: 500px !important; max-width: none !important;
margin: 20px auto !important; margin: 8px auto !important;
max-height: 85vh !important; max-height: 85vh !important;
overflow-y: auto !important; overflow-y: auto !important;
padding: 20px !important; padding: 16px !important;
} }
/* Button improvements */ /* Button improvements */
@@ -1808,9 +1813,11 @@
} }
.admin-content-container { .admin-content-container {
width: 95%; width: 100%;
margin: 10px auto; max-width: 100%;
padding: 15px; margin: 0;
padding: 12px 12px 18px;
box-sizing: border-box;
overflow-x: hidden; overflow-x: hidden;
} }
@@ -1824,12 +1831,13 @@
/* Better modal sizing for mobile */ /* Better modal sizing for mobile */
.modal-content { .modal-content {
width: 95% !important; width: calc(100vw - 16px) !important;
max-width: none !important; max-width: none !important;
margin: 10px auto !important; margin: 8px auto !important;
max-height: 90vh !important; max-height: 90vh !important;
overflow-y: auto !important; overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important; -webkit-overflow-scrolling: touch !important;
padding: 16px !important;
} }
} }