fix(layout): stack 2-column form / detail grids on narrow viewports (MAPPS-279) #315
No reviewers
Labels
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Dependencies
No dependencies set
Reference
psa-systems/mokosh-apps!315
Loading…
Reference in a new issue
No description provided.
Delete branch "fix/MAPPS-279-mobile-responsive"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Sweep the hardcoded
grid grid-cols-2 gap-Xrows across portal / reports / contracts / projects / assets togrid grid-cols-1 sm:grid-cols-2 gap-Xso they stack on a 390px (mobile) viewport and split at sm+ (640px+). Without the responsive variant the two columns squeezed every form-input pair and detail-list pair, and inputs / values overflowed cards at 390px. The QA report's specific complaint ("four-across cards at 390px") was the dashboard - which already hadsm:grid-cols-2 lg:grid-cols-4, so that's not it; the actual offenders were the inner 2-column grids inside detail panels, asset forms, project forms, contract forms, the report cards, and the portal home stats. The sharedTablealready wraps inoverflow-x-autoso tables don't clip horizontally; the AppLayout / TopBar / Sidebar are already responsive (lg:hiddendrawer,hidden lg:flexdesktop rail, MAPPS-285 aria-hidden gate).Remaining surfaces worth a second pass (parked as follow-up under this ticket): the ticket-detail sidebar's inline editors stack at sm+ but use fixed-width selects below sm; bulk-action toolbar on lists could wrap better when the verb-button cluster exceeds the row.
#MAPPS-279
Sweep the hardcoded `grid grid-cols-2 gap-X` rows across portal / reports / contracts / projects / assets to `grid grid-cols-1 sm:grid-cols-2 gap-X` so they stack on a 390px (mobile) viewport and split at sm+ (640px+). Without the responsive variant the two columns squeezed every form-input pair and detail-list pair, and inputs / values overflowed cards at 390px. The QA report's specific complaint ("four-across cards at 390px") was the dashboard - which already had `sm:grid-cols-2 lg:grid-cols-4`, so that's not it; the actual offenders were the inner 2-column grids inside detail panels, asset forms, project forms, contract forms, the report cards, and the portal home stats. The shared `Table` already wraps in `overflow-x-auto` so tables don't clip horizontally; the AppLayout / TopBar / Sidebar are already responsive (`lg:hidden` drawer, `hidden lg:flex` desktop rail, MAPPS-285 aria-hidden gate). Remaining surfaces worth a second pass (parked as follow-up under this ticket): the ticket-detail sidebar's inline editors stack at sm+ but use fixed-width selects below sm; bulk-action toolbar on lists could wrap better when the verb-button cluster exceeds the row. #MAPPS-279