# Portal Mockup Responsive Design Conventions

## Table column visibility breakpoints

Use Tailwind responsive classes to hide columns on smaller screens. Convention:

| Column category | Phone (<640px) | Tablet (640-1024) | Desktop (1024+) |
|---|---|---|---|
| Domain / Name / Router | `col-span-2` | `col-span-1` | `col-span-1` |
| Status / Badge | `hidden sm:block` / `hidden sm:inline` | visible | visible |
| Customer | `hidden sm:table-cell` | visible | visible |
| Expires / Plan / Model | `hidden md:table-cell` | `hidden` on phone | visible |
| Records / Uptime / Days | `hidden lg:table-cell` | `hidden` on phone and tablet | visible |
| Latency / Installed / TTL | `hidden xl:table-cell` | `hidden` on phone, tablet, small desktop | visible |
| Actions | always visible | always visible | always visible |

## Card layout responsiveness

- Summary cards: `grid-cols-2 sm:grid-cols-4` (2 on phone, 4 on desktop)
- Side-by-side content panes: `grid-cols-1 sm:grid-cols-2` (stack on phone, side by side on tablet+)
- Three-column bottom sections: `grid-cols-1 md:grid-cols-2 lg:grid-cols-3`

## Padding and spacing

- Cards: `p-3 sm:p-4 md:p-5`
- Card padding with border: `p-3 sm:p-4 md:p-6`
- Table cells: `px-3 sm:px-4 md:px-5 py-2 sm:py-3`
- Table header cells: `px-3 sm:px-4 md:px-5 py-2 sm:py-2.5`
- Grid gaps: `gap-1 sm:gap-3 md:gap-4`
- Header: `px-2 sm:px-4 md:px-6 py-2 sm:py-3`

## Font sizes

- Summary values: `text-base sm:text-xl md:text-2xl font-bold`
- Section titles: `text-lg md:text-xl font-bold`
- Subtitle: `text-xs sm:text-sm`
- Table text: `text-sm` (stays readable on all)
- Tab text: `text-xs md:text-sm`

## Navigation bar

- Gap: `gap-1 sm:gap-3 md:gap-5`
- Hide non-critical nav items: `hidden md:inline` on items that aren't the primary focus
- Tab overflow: `overflow-x-auto` on the tab bar, `whitespace-nowrap` on tab items

## Header (device detail pages)

- Use `flex-col md:flex-row md:items-center justify-between gap-2`
- Quick action selects stack below title on phone

## DNS query table (6 columns)

On mobile: only Domain column visible (col-span-2). Time, Client, Type, Response, Client Hostname all hidden with `hidden sm:block` or `hidden md:block` or `hidden lg:block`. Table remains horizontally scrollable if needed, but typically the column reduction is enough.

## Table wrapping

Always wrap responsive tables in `<div class="table-wrap" style="overflow-x:auto;-webkit-overflow-scrolling:touch;">` for horizontal scroll on small devices.

## Breakpoint cheat sheet

- `sm:` = 640px+ (landscape phone, portrait tablet)
- `md:` = 768px+ (tablet landscape, small desktop)
- `lg:` = 1024px+ (desktop)
- `xl:` = 1280px+ (wide desktop)

## Common pattern for a responsive table

```html
<div class="table-wrap">
  <table class="w-full text-sm">
    <thead>
      <tr class="...">
        <th class="px-3 sm:px-4 md:px-5 py-2.5">Column A</th>
        <th class="px-2 py-2.5 hidden sm:table-cell">Column B</th>
        <th class="px-2 py-2.5 hidden md:table-cell">Column C</th>
        <th class="px-2 py-2.5 hidden lg:table-cell">Column D</th>
        <th class="px-3 sm:px-4 md:px-5 py-2.5 text-right">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr class="...">
        <td class="px-3 sm:px-4 md:px-5 py-3">Value A</td>
        <td class="px-2 py-3 hidden sm:table-cell">Value B</td>
        <td class="px-2 py-3 hidden md:table-cell">Value C</td>
        <td class="px-2 py-3 hidden lg:table-cell">Value D</td>
        <td class="px-3 sm:px-4 md:px-5 py-3 text-right"><button>Edit</button></td>
      </tr>
    </tbody>
  </table>
</div>
```