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

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

<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>

3.5 KiB Raw Blame History