# Responsive Design — GB4.7MFE

Last analyzed: 2026-02-23

---

## Current State
- **Good:** Angular Material BreakpointObserver used in `gblayout.component.ts:53`
- **Good:** Material Design components are responsive by default
- **Good:** Limited hardcoded pixel values in components
- **Issue:** TailwindCSS included but usage inconsistent with Material — pick one per module

---

## Known Issues

### Magic Number in Layout Height
- `features/gblayout/gblayout.component.ts:46`
  - `--screenheight: ${height - 160}px` — 160px hardcoded to account for header height
  - Breaks if header height changes; incorrect on mobile (browser chrome varies)
  - Fix: Use `dvh` (dynamic viewport height) or `calc(100dvh - var(--header-height))`

### Fixed Dialog Widths
- `projects/recruitment/transaction/recruitment/applicant/applicant.component.ts:121`
  - `MatDialog.open(..., { width: '600px' })` — breaks on screens < 600px
  - This pattern is likely widespread across all modules
  - Fix all `MatDialog.open()` calls:
    ```typescript
    {
      width: 'min(600px, 95vw)',
      maxWidth: '95vw',
    }
    ```

### Canvas Fixed Dimensions
- `projects/production/others/floorplan/floorplan.component.ts:76-77`
  - Fabric.js canvas: `width: 600, height: 420` — hardcoded
  - Fix: read container width dynamically with ResizeObserver

---

## Rules for New Modules

1. **NEVER use `width: Xpx` in MatDialog** — always use `min(Xpx, 95vw)` + `maxWidth: '95vw'`
2. **NEVER hardcode pixel offsets for viewport height** — use `dvh` or CSS custom properties
3. **NEVER use `window.addEventListener('resize')`** — use Angular Material `BreakpointObserver`
4. **ALWAYS add RTL styles** when implementing layout — use `[dir="rtl"]` selector
5. **Pick one CSS system per module:** Material Design OR TailwindCSS — do not mix
6. **Use TailwindCSS responsive prefixes consistently:** `sm:`, `md:`, `lg:`, `xl:`
7. **Test on mobile viewport** (375px width) as part of feature completion
8. **Use `ResizeObserver` for canvas/SVG elements** — never hardcode canvas dimensions

## Breakpoints Reference (Angular Material)
```typescript
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
// Handset: <= 599px
// Tablet: 600-1279px
// Web: >= 1280px
```