Mobile Responsiveness

The Arcturus-Prime 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