/* * mobile-admin.css — global mobile redesign for the Admin portal. * * Why this file exists * -------------------- * MangoQuiz Admin uses MudBlazor's MudDataGrid on 18 list pages. The * component crams the page title, search field, and four-to-five action * buttons into a single . On a 360 dp phone viewport the * toolbar wraps every button onto its own line, and Vietnamese labels * ("Làm mới", "Tạo mới", …) wrap to two lines each, so the toolbar grows * to ~half the screen height and overlaps the row action buttons. * * Rather than rewriting all 18 pages, we apply a pure-CSS responsive * layer that: * 1. Reshapes the toolbar at narrow widths so the title sits on its * own row, search uses the full width, and action buttons collapse * into a compact icon strip below. * 2. Promotes each MudDataGrid row into a stacked "card" view with * label-on-the-left, value-on-the-right cells. We don't need the * `data-label` attribute MudTable uses — instead we hide the * header row at narrow widths and let the existing `mud-table-cell` * structure render vertically (Mud already gives every the * same class and ARIA role we can target). * 3. Tightens container padding so 360 dp viewports don't waste 24 dp * per side. * * No Razor markup changes are required. To enable, link this file from * App.razor next to app.css. * * Breakpoint: 600 px matches MudBlazor's `Breakpoint.Sm`. We deliberately * do not touch desktop layout. */ @media (max-width: 600px) { /* ------------------------------------------------------------------ 1. Container padding — claw back ~24 dp per side that the default MudContainer reserves for tablets and up. ------------------------------------------------------------------ */ .mud-main-content > .mud-container { padding-left: 8px !important; padding-right: 8px !important; } /* ------------------------------------------------------------------ 2. Toolbar (MudDataGrid's ToolBarContent) — break into rows. The container is `.mud-table-toolbar`; inside we usually find a MudStack (Row) holding title + actions. Force vertical stacking and let every direct child take a full row. ------------------------------------------------------------------ */ .mud-table-toolbar { flex-wrap: wrap !important; gap: 8px; padding: 8px 4px !important; min-height: auto !important; height: auto !important; align-items: stretch !important; } /* The outer Stack that pages use (`Justify.SpaceBetween`) needs to wrap rather than try to fit on one line. */ .mud-table-toolbar .toolbar-content, .mud-table-toolbar > .mud-stack { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; width: 100%; } /* Title: full-width, normal weight, no clipping. */ .mud-table-toolbar .toolbar-title, .mud-table-toolbar .mud-typography-h6 { font-size: 1rem !important; line-height: 1.4 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; text-align: left !important; width: 100%; } /* Action group: horizontal row beneath the title, wraps as needed. */ .mud-table-toolbar .toolbar-actions { flex-direction: row !important; flex-wrap: wrap !important; gap: 4px !important; width: 100%; justify-content: flex-start !important; } /* Search field: full-width and below the title. */ .mud-table-toolbar .toolbar-actions > .mud-input-control, .mud-table-toolbar .toolbar-actions > .mud-input-control-input-control, .mud-table-toolbar .mud-input-control { flex: 1 1 100% !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; margin-right: 0 !important; } /* The inner MudToolBar that nests the action buttons: collapse to icon-only mode by hiding button labels and shrinking padding. Each button still renders its icon (`StartIcon`); we hide the text node so the toolbar uses ~40 dp per button instead of ~96 dp for "Làm mới"/"Tạo mới"/"Xóa"/"Thêm". */ .mud-table-toolbar .mud-toolbar { flex-wrap: wrap !important; gap: 4px !important; padding: 0 !important; min-height: auto !important; height: auto !important; } .mud-table-toolbar .mud-toolbar .mud-button-root { min-width: 0 !important; padding: 6px 10px !important; } /* Show only the icon, drop the long Vietnamese label. The icon conveys the action; the menu / tooltip still gives the label for screen readers. */ .mud-table-toolbar .mud-toolbar .mud-button-root .mud-button-label { font-size: 0 !important; /* hides text but keeps element */ line-height: 0 !important; } .mud-table-toolbar .mud-toolbar .mud-button-root .mud-button-icon-start, .mud-table-toolbar .mud-toolbar .mud-button-root .mud-button-icon-end { margin: 0 !important; font-size: 1.25rem !important; line-height: 1 !important; } /* Overflow menu (`MudMenu` with EndIcon=MoreVert) shows label "Thêm". Hide that label too; keep the dot-menu icon. */ .mud-table-toolbar .mud-menu .mud-button-root .mud-button-label, .mud-table-toolbar .mud-menu .mud-button-label { font-size: 0 !important; line-height: 0 !important; } /* ------------------------------------------------------------------ 3. Table body — render each row as a card with label-on-left, value-on-right cells. ------------------------------------------------------------------ */ /* Hide the column header row entirely on mobile — its labels are re-shown inside each cell via the data-label injected by JS (see mobile-admin.js). If JS is disabled we fall back to anonymous stacked cells, which is still better than the broken horizontal table. */ .mud-table-root .mud-table-head { display: none !important; } /* Promote each row to a card. */ .mud-table-root .mud-table-body .mud-table-row { display: flex !important; flex-direction: column !important; margin-bottom: 12px !important; border: 1px solid var(--mud-palette-table-lines, rgba(0, 0, 0, 0.08)); border-radius: 8px; background: var(--mud-palette-surface, #fff); padding: 8px 12px; } /* Each cell becomes a label / value row. */ .mud-table-root .mud-table-body .mud-table-cell { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; padding: 6px 0 !important; border-bottom: 1px dashed var(--mud-palette-table-lines, rgba(0, 0, 0, 0.06)) !important; text-align: right !important; word-break: break-word; overflow-wrap: anywhere; } /* Inject the column title via the data-label attribute set by JS. The pseudo-element is the left-hand label; the cell content is the right-hand value. */ .mud-table-root .mud-table-body .mud-table-cell::before { content: attr(data-label); flex: 0 0 auto; max-width: 45%; min-width: 96px; font-weight: 600; text-align: left; opacity: 0.8; white-space: normal; word-break: normal; } /* If the cell has no data-label (e.g. a select-all checkbox column or an Actions column whose header is empty), suppress the pseudo-element so we don't render a dangling "::before" gap. */ .mud-table-root .mud-table-body .mud-table-cell[data-label=""]::before, .mud-table-root .mud-table-body .mud-table-cell:not([data-label])::before { content: none; } /* The row separator looks busy when every cell already has a dashed bottom border. */ .mud-table-root .mud-table-body .mud-table-cell:last-child { border-bottom: none !important; } /* MudDataGrid wraps the checkbox column in a special class; align it to the right of the card so it doesn't sit awkwardly on top of the row content. */ .mud-table-cell.checkbox-cell { justify-content: flex-end !important; } /* Action column (TemplateColumn with title=AppStrings.Actions): the MudMenu trigger used to overflow off-screen because the cell was 60 px wide. With our card layout the cell is full-width and the button sits on the right by default. Nothing else needed. */ /* ------------------------------------------------------------------ 4. Pager — let it wrap and use the full width. ------------------------------------------------------------------ */ .mud-table-pagination, .mud-table-pagination-toolbar { flex-wrap: wrap !important; justify-content: center !important; gap: 4px !important; padding: 8px 4px !important; } .mud-table-pagination-spacer { display: none !important; } /* ------------------------------------------------------------------ 5. Free-form layout helpers shared across pages. ------------------------------------------------------------------ */ /* Long word-break helper consumed by individual pages where needed. */ .break-word { word-break: break-word; overflow-wrap: anywhere; } }