/frontend-engineer

Responsive UI Patterns

Layout patterns for common frontend app surfaces. Read this reference when building or fixing responsive layouts.

Dashboards

• Use CSS Grid for main layout: sidebar + content area.
• Sidebar collapses to hamburger or bottom tab bar on mobile.
• Stat cards: 4-column grid on desktop → 2-column on tablet → 1-column on mobile.
• Charts: full-width on mobile. Side-by-side on desktop.
• Use minmax() in grid templates to prevent content from shrinking below readable size.

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

Sidebars

• Fixed sidebar (220–280px) on desktop.
• Collapse to icon-only (64px) on tablet with tooltip labels.
• Off-canvas drawer (overlay) on mobile, triggered by hamburger.
• Use position: sticky for sidebar, not fixed — avoids scroll conflicts.
• Active nav item clearly highlighted.

Desktop:  [sidebar 240px] [content 1fr]
Tablet:   [sidebar 64px]  [content 1fr]
Mobile:   [content 100%] + overlay drawer

Data Tables

• Horizontal scroll wrapper on mobile — never force page-level horizontal scroll.
• Pin first column (name/ID) on mobile scroll.
• Hide low-priority columns on small screens with display: none at breakpoint.
• Minimum column width: 100px for data, 44px for action buttons.
• Row height: 48–56px for comfortable touch targets.

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

Forms

• Single-column layout on mobile.
• Two-column for related short fields (first name / last name) on desktop.
• Labels above inputs (not inline) on all screen sizes for mobile friendliness.
• Input height: minimum 44px for touch targets.
• Group related fields with fieldset/legend or visual section breaks.
• Submit button full-width on mobile, auto-width on desktop.

Modals and Dialogs

• Max-width 480–640px on desktop. Centered with backdrop.
• Full-screen or bottom sheet on mobile (≤480px).
• Close button always accessible in top-right.
• Content scrolls internally — modal itself stays in view.
• Trap focus inside modal when open.

@media (max-width: 480px) {
  .modal {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}

Mobile Navigation

• Bottom tab bar (4–5 items max) for primary app navigation.
• Hamburger menu for secondary navigation items.
• Sticky top header with app title and key actions.
• No nested dropdowns on mobile — use full-screen drill-down views.
• Active tab/section indicator clearly visible.

Split Panes

• Side-by-side (list + detail) on desktop (40/60 or 33/67 split).
• Master-detail pattern on mobile: list view → tap → detail view (navigation-based).
• Draggable divider optional on desktop for user-adjustable widths.
• Minimum pane width: 320px before collapsing.

Cards, Lists, and Grids

• Cards: use auto-fit / auto-fill with minmax() for fluid grids.
• Minimum card width: 260–300px for readable content.
• Lists: full-width on all screens. Use dividers or alternating background for scanability.
• Grid items maintain consistent height per row — use align-items: stretch or fixed aspect ratios.
• Image cards: object-fit: cover for consistent image sizing.

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

Breakpoint Reference

Prefer min-width media queries (mobile-first). Set breakpoints based on content, not devices.