ArgoBox
ArgoBox AI + Infrastructure + Labs
Ctrl+K
Site Architecture

Mobile Responsiveness

Breakpoint strategy, grid system, touch targets, fullscreen embeds, and mobile-first patterns for the ArgoBox admin area

February 25, 2026

Mobile Responsiveness

The ArgoBox admin area is designed desktop-first but includes a comprehensive mobile optimization layer targeting phone viewports down to 412px (Samsung Galaxy S21 Ultra). This document covers the breakpoint system, grid patterns, touch target requirements, fullscreen embed behavior, and per-page mobile rules.

Breakpoint System

Three breakpoints are used consistently across the codebase. All breakpoints use max-width media queries since the base styles target desktop.

Breakpoint CSS Target Devices Purpose
Tablet @media (max-width: 1024px) iPads, small laptops Reduce grid columns, wrap flex items, collapse secondary panels
Small tablet @media (max-width: 768px) Large phones landscape, small tablets Sidebar → hamburger overlay, grids → 1–2 columns, reduced padding
Phone @media (max-width: 480px) Phone portrait (412px Galaxy S21 Ultra) Single column, stacked layouts, minimal padding, fullscreen prompts

Some pages include intermediate breakpoints (900px for cloudflare metrics, 640px for users page, 560px for cloudflare KV) when the content demands finer control.

The Sidebar Breakpoint

At 768px, the AdminSidebar, UserSidebar, and DashboardSidebar all hide off-screen via transform: translateX(-100%) and a hamburger button appears in the top-left corner. The .cosmic-interface content area drops its margin-left to zero. This is handled in two places:

  • AdminSidebar.astro — @media (max-width: 768px) applies transform: translateX(-100%) and .mobile-open toggles it back
  • CosmicLayout.astro — @media (max-width: 768px) sets .has-admin-sidebar { margin-left: 0 } and shows .admin-mobile-hamburger { display: flex }

The hamburger button triggers sidebar.classList.toggle('mobile-open') with a backdrop overlay for dismissal. Navigation links auto-close the sidebar on click.

Grid System

Global Grids

Three global CSS files define reusable grid patterns. All have 480px phone breakpoints.

glass-morphism.css — Utility grid classes used across many admin pages:

Class Desktop Phone (≤480px)
.glass-grid-2 repeat(auto-fit, minmax(280px, 1fr)) 1fr
.glass-grid-3 repeat(auto-fit, minmax(320px, 1fr)) 1fr
.glass-grid-4 repeat(auto-fit, minmax(240px, 1fr)) 1fr

control-center.css — Build swarm control center:

Class Desktop Tablet (≤1024px) Phone (≤480px)
.fleet-grid repeat(auto-fill, minmax(280px, 1fr)) minmax(250px, 1fr) 1fr
.cc-log-entry 70px 70px 110px 1fr 60px 60px 1fr 50px 1fr
.drone-metrics repeat(2, 1fr) 1fr 1fr

space-theme.css — Tech grids and timelines:

Class Desktop Tablet (≤768px)
.tech-grid repeat(auto-fill, minmax(280px, 1fr)) 1fr
.tech-grid-dense repeat(auto-fill, minmax(200px, 1fr)) (inherits tech-grid)

Page-Specific Grids

Pages with custom grids include their own 480px breakpoints:

Page Grid Desktop Columns Phone Columns
/admin/cloudflare .cf-metric-row repeat(5, 1fr) repeat(2, 1fr)
/admin/cloudflare .cf-kv-grid repeat(auto-fill, minmax(160px, 1fr)) 1fr
/admin/api-dashboard .apid-grid repeat(3, 1fr) 1fr
/admin/docs-hub .cards repeat(auto-fill, minmax(340px, 1fr)) 1fr
/admin/docs-hub .recent-list repeat(auto-fill, minmax(340px, 1fr)) 1fr
/admin/build-swarm .dashboard repeat(12, 1fr) 1fr
/admin/build-swarm .fleet-grid repeat(auto-fill, minmax(240px, 1fr)) 1fr
/admin/homelab .services-grid repeat(auto-fill, minmax(300px, 1fr)) 1fr
/admin/homelab .discovered-grid repeat(auto-fill, minmax(260px, 1fr)) 1fr
/admin/dashboard-profiles .widget-category-items repeat(auto-fill, minmax(140px, 1fr)) repeat(2, 1fr)
/admin/users .users-checkboxes repeat(auto-fill, minmax(140px, 1fr)) 1fr

Grid Pattern Guidelines

When adding new grids to admin pages:

  1. Use auto-fill with minmax() for card layouts — it handles most breakpoints automatically
  2. Always add a ≤480px breakpoint if the minmax value exceeds 200px — phones can't fit two 250px columns
  3. Use 1fr at phone width for most grids — single column is always safe
  4. Use repeat(2, 1fr) at phone width only for very small items (badges, stats, toggles)
  5. Never use fixed pixel grid-template-columns (like repeat(12, 1fr)) without a phone breakpoint

Touch Targets

All interactive elements must meet the 44×44px minimum touch target size on mobile (WCAG 2.1 Level AAA, Target Size criterion).

Sidebar Touch Targets

At ≤768px, AdminSidebar increases touch targets:

.sidebar-link { padding: 0.65rem 0.75rem; min-height: 44px; }
.sidebar-cmd-btn { min-height: 44px; }
.sidebar-toggle { min-width: 44px; min-height: 44px; }

Hamburger Buttons

All three mobile hamburger buttons (admin, user, dashboard) in CosmicLayout are 44×44px:

.admin-mobile-hamburger { width: 44px; height: 44px; }
.user-mobile-hamburger { width: 44px; height: 44px; }
.dash-mobile-hamburger { width: 44px; height: 44px; }

Button Guidelines

When adding new buttons or links to admin pages:

  • Minimum min-height: 44px on any tappable element
  • Minimum padding: 0.5rem 0.75rem for text buttons
  • Tab bars and pill selectors: min-height: 44px with white-space: nowrap
  • Icon-only buttons: min-width: 44px; min-height: 44px

Fullscreen Embeds

Both terminal and VNC embeds support fullscreen mode for immersive mobile experiences.

VNCEmbed

The VNC component (src/components/labs/VNCEmbed.astro) provides fullscreen via:

  • Fullscreen button in the chrome bar (expand icon)
  • Double-click on the VNC screen area
  • F11 key (captured and redirected to element fullscreen, not browser fullscreen)
  • Fullscreen API: element.requestFullscreen() / document.exitFullscreen()

In fullscreen mode:

  • Chrome bar becomes absolutely positioned, hidden by default, appears on hover
  • VNC screen fills 100% width and height
  • ResizeObserver triggers noVNC rescale on dimension changes
  • Border radius and borders are removed

Mobile (≤768px):

  • Fullscreen button gets amber background with "Fullscreen" text label
  • VNC screen height: clamp(300px, calc(100vh - 160px), 600px)

TerminalEmbed

The terminal component (src/components/labs/TerminalEmbed.astro) mirrors VNCEmbed's fullscreen:

  • Fullscreen button in the chrome bar (expand icon, before reconnect button)
  • Double-click on the terminal container
  • Fullscreen API: same requestFullscreen() / exitFullscreen() toggle

In fullscreen mode:

  • Chrome bar: absolutely positioned, opacity: 0, fades in on hover
  • Terminal container: height: 100%
  • fitAddon.fit() called on fullscreen change to resize xterm.js
  • Border radius and borders removed

Mobile (≤768px):

  • Fullscreen button gets indigo background with "Fullscreen" text label
  • Terminal height: clamp(280px, calc(100vh - 180px), 600px)
  • Border radius reduced to 8px

Console Page Coordination

Both the Proxmox console page (/admin/proxmox/console) and the pentest console page (/admin/pentest/console) include mobile CSS that:

  • Reduces page padding to 0.75rem
  • Stacks the header vertically (title above badges above actions)
  • Makes tab bars horizontally scrollable with min-height: 44px touch targets
  • Removes max-width constraints on the console body

Dialog and Modal Safety

All dialogs and modals must include a viewport-relative max-width to prevent overflow on phones. The pattern:

/* Safe — caps at 90% of viewport */
max-width: min(90vw, 900px);

/* Also safe — inline style with explicit max-width */
style="width: 500px; max-width: 90vw;"

Pages with fixed-width dialogs that have been patched:

Page Element Original Fixed
/admin/pipeline .pipe-dialog width: 500px width: 500px; max-width: 90vw
/admin/chat .input-wrapper max-width: 900px max-width: min(90vw, 900px)
/admin/chat .input-meta max-width: 900px max-width: min(90vw, 900px)
/admin/users .users-container max-width: 900px max-width: min(90vw, 900px)
/admin/dashboard-profiles .profiles-container max-width: 960px max-width: min(90vw, 960px)

Dialog Guidelines

When adding new dialogs or modals:

  1. Always include max-width: min(90vw, <desired-width>px)
  2. For full-screen modals on mobile, add @media (max-width: 480px) { width: 100%; border-radius: 0; }
  3. Set max-height: 80vh (not 90vh) to leave room for the mobile keyboard
  4. Use overflow-y: auto inside the dialog body for scrollable content

Pentest Pages Mobile Pattern

The four pentest tool pages (recon, webapp, exploit, reports) share a consistent mobile pattern at ≤480px:

Layout Stacking

  • Page padding: 1rem 0.75rem (reduced from 1.5rem)
  • Node pill bar: wraps to its own full-width row with order: 3, pills get flex: 1 for even distribution
  • Target bar: flex-direction: column — input, toggle, and select stack vertically
  • Tool options: flex-direction: column — each option group takes full width

Reports Specifics

The reports page additionally stacks:

  • Generate form: inputs stack vertically
  • Format toggle: full-width with centered buttons
  • Report actions (View/Download): stacked vertically
  • Table: reduced font-size and cell padding

Workbench and Inline min-width

Some pages use inline style="min-width: 300px" on elements. CSS cannot override inline styles without !important. The pattern used:

@media (max-width: 480px) {
  .sandbox-category {
    min-width: unset !important;
    width: 100%;
  }
}

This is used on:

  • /admin/index — .sandbox-category (inline 300px)
  • /admin/workbench — .wb-sidebar (CSS 300px)

Docs Hub Text Contrast

The docs pages (both /docs/ public route and /admin/docs-hub/ admin route) use explicit hex colors rather than CSS variables for text, since the cosmic background requires higher contrast than the base theme provides.

Color Palette (Doc Body)

Element Color Hex Mobile Override
<h1> Near-white #f8fafc —
<h2> Bright gray #f1f5f9 —
<h3> Light gray #e2e8f0 —
<h4> Soft gray #d4dce6 #dfe6ee
<h5>, <h6> Medium gray #b0bcc8 #bec8d4
<p>, <li>, <td> Body text #d1d9e3 #dbe2ea
<strong> Bright #f1f5f9 —
<code> (inline) Cyan var(--nebula-cyan) —

Color Palette (Navigation Chrome)

Element Color Hex Notes
TOC links Medium gray #8a95a5 Cyan on hover/active
Nav numbers Dim gray #7d8898 Monospace font
"Other Sections" links Medium gray #8a95a5 Brighter on hover → #c8d1db
Breadcrumbs Medium gray #8a95a5 —
Card descriptions (hub) Medium gray #8a95a5 —
Index descriptions Medium gray #8a95a5 —

These replaced var(--text-tertiary) (#64748b) which had insufficient contrast on the dark cosmic background at small font sizes.

Mobile Overrides (≤900px)

The doc reader pages add mobile-specific brightness bumps inside @media (max-width: 900px):

  • Sidebar nav items: 0.88rem font, #c8d1db color, subtle rgba(255,255,255,0.04) background
  • Active nav item: rgba(6,182,212,0.15) background (stronger cyan)
  • Body text: #dbe2ea at 0.95rem with line-height: 1.75
  • All peripheral text (breadcrumbs, TOC, meta): #8a95a5

The hub index pages add overrides at @media (max-width: 768px):

  • Card titles: #eaf0f6 at 1.05rem
  • Card descriptions: #9aa4b0 at 0.85rem
  • Section headers: #f5f7fa
  • Recent/index titles: #e2eaf2 at 0.95rem

Testing

Target device: Samsung Galaxy S21 Ultra (412px portrait, 915px landscape).

Quick Test Checklist

  1. Open any admin page on a 412px viewport (Chrome DevTools → Galaxy S21 Ultra preset)
  2. Verify: no horizontal scroll on any page
  3. Verify: hamburger menu appears and opens/closes sidebar
  4. Verify: all grids render single-column
  5. Verify: all buttons/links are at least 44px tall
  6. Verify: modals/dialogs don't overflow the viewport
  7. Verify: TerminalEmbed fullscreen button works (tap → immersive terminal)
  8. Verify: VNCEmbed fullscreen button works (tap → immersive VNC desktop)

Pages With Custom Mobile CSS

These pages have their own @media (max-width: 480px) blocks and should be checked individually after any changes:

src/pages/admin/api-dashboard.astro
src/pages/admin/build-swarm.astro
src/pages/admin/build-swarm-public-v3.astro
src/pages/admin/chat.astro
src/pages/admin/cloudflare.astro
src/pages/admin/dashboard-profiles.astro
src/pages/admin/docs-hub.astro
src/pages/admin/homelab.astro
src/pages/admin/index.astro
src/pages/admin/openclaw.astro
src/pages/admin/pentest/exploit.astro
src/pages/admin/pentest/recon.astro
src/pages/admin/pentest/reports.astro
src/pages/admin/pentest/webapp.astro
src/pages/admin/pipeline.astro
src/pages/admin/users.astro
src/pages/admin/workbench.astro
mobileresponsivecssgridstouch-targetsfullscreenbreakpointsadmin