Multiple UI/UX improvements

Author: MDA2AV

CHANGELOG.md

@@ -13,6 +13,21 @@ All notable changes to Http11Probe are documented in this file.
 - **Truncation notice** — tooltip and modal now show a `[Truncated]` notice at the top when raw request/response data exceeds the 8,192-byte display limit
 
 ### Changed
+- **Horizontal column headers** — test name headers are now displayed horizontally instead of rotated at -55°, improving readability
+- **Zebra striping** — alternating row backgrounds for easier scanning
+- **Softer borders** — lighter table borders in both light and dark mode, plus vertical separators between test columns
+- **Expected row styling** — CSS-only background with dark mode support (fixes light gray leak in dark mode), thicker bottom border for visual separation
+- **Scored/unscored separator** — heavier vertical border line between scored and unscored test columns
+- **Larger pills** — increased padding, min-width, and border-radius for result badges
+- **Improved readability** — larger base font (13px), bigger column headers with heavier weight and letter-spacing, more cell padding throughout
+- **Group header refinement** — added padding and bottom border to collapsible group headers
+- **Toggle button polish** — reduced border-radius from pill to button shape
+- **Scroll overflow hint** — "Scroll to see all tests" label and right-edge fade gradient appear when tables overflow horizontally
+- **Language suffix dark mode** — improved contrast for language labels in dark mode
+- **Mobile bottom-sheet modal** — modal slides up from bottom on small screens with full width and rounded top corners
+- **Touch-friendly targets** — larger buttons and invisible hit-area expansion on pills for touch devices
+- **Smooth momentum scroll** — added `-webkit-overflow-scrolling:touch` for iOS
+- **Stronger sticky shadow on mobile** — increased shadow intensity for the pinned server name column
 - **Scrollable tooltips** — hover tooltips are now interactive and scrollable for large payloads (removed `pointer-events:none`, increased `max-height` to `60vh`)
 - **Larger click modal** — expanded from `max-width:700px` to `90vw` and `max-height` from `80vh` to `85vh` to better accommodate large request/response data
 - Raw request capture now includes truncation metadata when payload exceeds 8,192 bytes (`TestRunner.cs`)

docs/content/compliance/_index.md

@@ -11,7 +11,7 @@ These tests validate that HTTP/1.1 servers correctly implement the protocol requ
 Each test sends a request that violates a specific **MUST** or **MUST NOT** requirement from the RFCs. A compliant server should reject these with a `400 Bad Request` (or close the connection). Accepting the request silently means the server is non-compliant and potentially vulnerable to downstream attacks.
 
 {{< callout type="info" >}}
-Click a **server name** to view its Dockerfile and source code. Click a **result cell** to see the full HTTP request and response.
+Click a **server name** to view its Dockerfile and source code. Click a **row** to expand all results for that server. Click a **result cell** to see the full HTTP request and response.
 {{< /callout >}}
 
 <div id="lang-filter"></div>

docs/content/malformed-input/_index.md

@@ -11,7 +11,7 @@ These tests send pathological, oversized, or completely invalid payloads to veri
 A well-implemented server should respond with `400 Bad Request`, `414 URI Too Long`, or `431 Request Header Fields Too Large` depending on the violation, or simply close the connection.
 
 {{< callout type="info" >}}
-Click a **server name** to view its Dockerfile and source code. Click a **result cell** to see the full HTTP request and response.
+Click a **server name** to view its Dockerfile and source code. Click a **row** to expand all results for that server. Click a **result cell** to see the full HTTP request and response.
 {{< /callout >}}
 
 <div id="lang-filter"></div>

docs/content/normalization/_index.md

@@ -17,7 +17,7 @@ Some tests are **unscored** (marked with `*`). These cover behaviors like case n
 {{< /callout >}}
 
 {{< callout type="info" >}}
-Click a **server name** to view its Dockerfile and source code. Click a **result cell** to see the full HTTP request and response.
+Click a **server name** to view its Dockerfile and source code. Click a **row** to expand all results for that server. Click a **result cell** to see the full HTTP request and response.
 {{< /callout >}}
 
 <div id="lang-filter"></div>

docs/content/smuggling/_index.md

@@ -15,7 +15,7 @@ Some tests are **unscored** (marked with `*`). These send payloads where the RFC
 {{< /callout >}}
 
 {{< callout type="info" >}}
-Click a **server name** to view its Dockerfile and source code. Click a **result cell** to see the full HTTP request and response.
+Click a **server name** to view its Dockerfile and source code. Click a **row** to expand all results for that server. Click a **result cell** to see the full HTTP request and response.
 {{< /callout >}}
 
 <div id="lang-filter"></div>