fix(web): responsive pass — real device sizes, scroll in the right containers · 4f277838c6 - NeuroSploit

0 Fork 0

mirror of https://github.com/CyberSecurityUP/NeuroSploit.git synced 2026-09-30 13:09:36 +02:00

fix(web): responsive pass — real device sizes, scroll in the right containers

Audited at 390×844, 844×390 (phone landscape), 768×1024, 1024×768, 1440×900
and ≥1600px. What was actually broken:

- **The run header collapsed.** `justify-content: space-between` let the two
  action buttons take the whole row, so at 390px the title wrapped one
  character per line ("Test AspNe / t") and the facts line wrapped one word per
  line. It now stacks below 680px, with the title block sized to its content
  instead of stretching (the desktop `flex: 1` was what left a 180px void above
  the buttons in the stacked layout).
- **The terminal header overflowed** its dock at 390px (557px of content in a
  390px box) — it wraps now, and the status text drops out on narrow screens
  where the coloured dot already carries it.
- **`100vh` is wrong on mobile.** It measures the viewport without the
  collapsing address bar, so the wizard footer and its CTA sit underneath it.
  Switched to `dvh` with the `vh` line kept as the fallback.
- **The dock took 82% of a phone in landscape** at its fixed 320px. It now
  tracks the viewport (`clamp(180px, 42dvh, 340px)`, tighter still under
  500px of height).
- **The off-canvas drawer had no way out but the button that opened it.**
  Added a scrim that closes it, Esc, and auto-close when a run is picked —
  and it closes itself if the window grows past the breakpoint, which
  otherwise left a scrim over a sidebar that was no longer a drawer.
- **The stepper scrolls horizontally on a phone**, so advancing to an
  off-screen step looked like nothing happened; the active step is scrolled
  into view.

Device-type rules rather than width alone: `pointer: coarse` gets 38-44px hit
targets and 16px inputs (under 16px, iOS zooms the page on focus and breaks the
layout the user is typing into); `prefers-reduced-motion` drops the drawer
slide and the progress animation, which are decoration.

Scrolling stays where it belongs — one scroller per pane (`.wizard-body`,
`.run-body`, `.dash-body`, `.sb-groups`, `.modal-body`, `.term-host`), wide
tables scroll inside `.table-wrap`, and the page itself never scrolls
horizontally at any tested size.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

This commit is contained in:

CyberSecurityUPandClaude Opus 5 committed 2026-09-13 15:16:24 -03:00

1 parent 6475dba752

commit 4f277838c6

3 files changed

+131 -23

No files matched your search

									
										web/public/index.html
									
		+2
		-1
	
												View File
												
				@@ -10,7 +10,8 @@

				</head>

				<body>

				<button class="sidebar-toggle" id="btnSidebarToggle" title="Show / hide run history" aria-label="Show or hide run history">☰</button>

				<button class="sidebar-toggle" id="btnSidebarToggle" title="Show / hide run history" aria-label="Show or hide run history" aria-expanded="false" aria-controls="sidebar">☰</button>

				<div class="sidebar-scrim" id="sidebarScrim" hidden></div>

				<div class="app">