diff --git a/samy.css b/samy.css index f33dd59..1cb4849 100644 --- a/samy.css +++ b/samy.css @@ -248,20 +248,19 @@ body { /* Columns & checkboxes */ .columns-container { - display: flex; + display: grid; + grid-template-columns: 1fr 1fr; gap: 20px; - flex-wrap: wrap; - align-items: flex-start; + align-items: start; } .column { - flex: 1; - max-width: 45%; border: 2px solid var(--border-color); border-radius: 8px; padding: 10px; background-color: var(--dark-gray-color); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); + max-width: none; } /* ========================= @@ -392,21 +391,35 @@ body { /* Responsive */ @media (max-width: 768px) { + + /* Stack sidebar on top (keep this if you liked the old behavior) */ .container { flex-direction: column; + height: 100%; } .sidebar { width: 100%; } - .column { - max-width: 100%; + /* Grid becomes 1 column on small screens */ + .columns-container { + grid-template-columns: 1fr; } + /* Ensure columns are full width */ + .column { + max-width: none; + } + + /* Panels go full width on mobile */ #PasswordContainer, - #dattoRmmContainer { + #dattoRmmContainer, + #printerPasswordContainer, + #printerClientContainer, + #printerListContainer { width: 100%; max-width: 100%; } } +