Revert "Add responsive styles for mobile and tablet views in components.css"

This reverts commit 1c5fe37bf8.
This commit is contained in:
2025-11-27 19:01:24 -04:00
parent 1c5fe37bf8
commit a097e290a9

View File

@@ -986,112 +986,3 @@ textarea {
padding-top: 110px;
}
}
/* ===== Responsive Enhancements (Mobile-first additions) ===== */
/* Layout helpers used by App.js */
.content-wrapper {
margin-top: 10px;
}
.content-grid {
display: grid;
grid-template-columns: 1.2fr 1fr; /* form + table */
gap: 20px;
}
/* Mobile menu toggle button (shown only on small screens) */
.menu-toggle {
position: fixed;
top: 16px;
left: 16px;
width: 42px;
height: 42px;
border-radius: 10px;
border: 1px solid rgba(0,0,0,0.08);
background: #ffffff;
color: var(--secondary);
display: none; /* hidden by default, visible on mobile */
align-items: center;
justify-content: center;
box-shadow: var(--shadow);
z-index: 110; /* above header (90) and below modal (1000) */
}
.menu-toggle i { font-size: 1.1rem; }
/* Tables: allow horizontal scrolling on small screens */
.table-container {
overflow-x: auto; /* enable horizontal scroll when needed */
}
/* Reduce table cell padding on narrow screens for density */
@media (max-width: 768px) {
th, td { padding: 12px 14px; }
}
/* On very small screens, keep table readable by allowing min width */
@media (max-width: 576px) {
table { min-width: 640px; }
}
/* Forms: stack fields on small screens */
@media (max-width: 768px) {
.form-row { flex-direction: column; }
.form-row .form-group { width: 100%; }
.btn { width: 100%; } /* make primary actions easier to tap */
}
/* Cards and content grid responsive behavior */
@media (max-width: 992px) {
.content-grid { grid-template-columns: 1fr; }
}
/* Sidebar: off-canvas behavior for mobile; content spacing */
@media (max-width: 1200px) {
/* when sidebar collapses to icons, reduce main-content margin */
.main-content { margin-left: 80px; }
}
@media (max-width: 576px) {
/* show menu toggle */
.menu-toggle { display: inline-flex; }
/* make sidebar slide in/out from the left */
.sidebar {
left: 0;
transform: translateX(-100%);
width: var(--sidebar-width); /* keep full width when opened */
box-shadow: none; /* avoid shadow when hidden */
}
.sidebar.active {
transform: translateX(0);
box-shadow: var(--shadow-lg);
}
/* main area should use full width on mobile */
.main-content {
margin-left: 0;
padding-left: 16px;
padding-right: 16px;
}
/* Header already set to left:0 in existing rules; ensure compact spacing */
.header { padding: 14px 16px; }
/* Cards spacing */
.card { padding: 16px; }
/* Tighten section title */
.section-title { font-size: 1.2rem; }
}
/* Modal: full width feel on small devices */
@media (max-width: 576px) {
.modal {
max-width: 100%;
width: 100%;
border-radius: 10px;
}
}