fix(html): resolve responsive report overflows and polish mobile UX (#17)

* chore(deps): upgrade requests to 2.33.0 and refresh locked security updates and bump codeclone version
* fix(html): resolve responsive report overflows and polish provenance badges
* fix(html): polish mobile responsive layout — sticky tabs, scroll shadows, compact topbar

Author: orenlab

.github/workflows/benchmark.yml

@@ -3,9 +3,8 @@ run-name: benchmark • ${{ github.event_name }} • ${{ github.ref_name }}
 
 on:
   push:
-    branches: [ "feat/2.0.0" ]
+    branches: [ "**" ]
   pull_request:
-    branches: [ "feat/2.0.0" ]
   workflow_dispatch:
     inputs:
       profile:

CHANGELOG.md

@@ -1,6 +1,20 @@
 # Changelog
 
-## [2.0.0b1]
+## [2.0.0b2]
+
+### Dependencies
+
+- Upgrade requests (dev dep) to 2.33.0 for extract_zipped_paths security fix (CVE-2026-25645)
+
+### HTML
+
+- Fix page-level horizontal scrolling in wide table tabs by constraining overflow to local table wrappers (#14).
+- Fix mobile header brand block layout on narrow viewports (#15).
+- Make mobile navigation tabs sticky and horizontally scrollable with scroll-shadow affordance.
+- Keep Overview KPI micro-badges inside cards at extreme browser/mobile widths.
+- Restyle Report Provenance summary badges to match the card-style badge language used across the report.
+
+## [2.0.0b1] - 20260325
 
 Major upgrade: CodeClone evolves from a structural clone detector into a
 **baseline-aware code-health and CI governance tool** for Python.

README.md

@@ -197,7 +197,7 @@ Dynamic/runtime false positives are resolved via explicit inline suppressions, n
 {
   "report_schema_version": "2.1",
   "meta": {
-    "codeclone_version": "2.0.0b1",
+    "codeclone_version": "2.0.0b2",
     "project_name": "...",
     "scan_root": ".",
     "report_mode": "full",

benchmarks/run_docker_benchmark.sh

@@ -2,7 +2,7 @@
 set -euo pipefail
 
 ROOT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
-IMAGE_TAG="${IMAGE_TAG:-codeclone-benchmark:2.0.0b1}"
+IMAGE_TAG="${IMAGE_TAG:-codeclone-benchmark:2.0.0b2}"
 OUT_DIR="${OUT_DIR:-$ROOT_DIR/.cache/benchmarks}"
 OUTPUT_BASENAME="${OUTPUT_BASENAME:-codeclone-benchmark.json}"
 CPUSET="${CPUSET:-0}"

codeclone.baseline.json

@@ -2,14 +2,14 @@
   "meta": {
     "generator": {
       "name": "codeclone",
-      "version": "2.0.0b1"
+      "version": "2.0.0b2"
     },
     "schema_version": "2.0",
     "fingerprint_version": "1",
     "python_tag": "cp313",
-    "created_at": "2026-03-24T15:14:34Z",
+    "created_at": "2026-03-26T16:36:17Z",
     "payload_sha256": "691c6cedd10e2a51d6038780f3ae9dffe763356dd2aba742b3980f131b79f217",
-    "metrics_payload_sha256": "3310d3a0f64d5fa0373546c5c4c82675dc5a441344f876092005665e81234e94"
+    "metrics_payload_sha256": "f18db9aa4573517b0babb31e4e995208209895ea6b8a1957087c0f3b6f1f5434"
   },
   "clones": {
     "functions": [
@@ -32,16 +32,14 @@
     "high_coupling_classes": [],
     "max_cohesion": 5,
     "low_cohesion_classes": [
-      "codeclone._cli_reports:_OutputPaths",
-      "codeclone._cli_reports:_ReportArtifacts",
       "codeclone.baseline:Baseline",
       "codeclone.metrics_baseline:MetricsBaseline",
       "tests.test_golden_v2:_DummyExecutor"
     ],
     "dependency_cycles": [],
-    "dependency_max_depth": 9,
+    "dependency_max_depth": 10,
     "dead_code_items": [],
-    "health_score": 78,
+    "health_score": 81,
     "health_grade": "B"
   }
 }

codeclone/_html_css.py

@@ -139,15 +139,18 @@
   box-shadow:var(--shadow-sm)}
 .topbar-inner{display:flex;align-items:center;justify-content:space-between;
   height:72px;padding:0 var(--sp-6);max-width:var(--container-max);margin:0 auto}
-.brand{display:flex;align-items:center;gap:var(--sp-3)}
+.brand{display:flex;align-items:center;gap:var(--sp-3);min-width:0;flex:1}
 .brand-logo{flex-shrink:0}
-.brand-text{display:flex;flex-direction:column;gap:2px}
-.brand h1{font-size:1.15rem;font-weight:700;color:var(--text-primary);line-height:1.3}
-.brand-meta{font-size:.78rem;color:var(--text-muted)}
-.brand-project{font-weight:500;color:var(--text-secondary)}
+.brand-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
+.brand h1{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-1);font-size:1.15rem;
+  font-weight:700;color:var(--text-primary);line-height:1.3;min-width:0}
+.brand-meta{font-size:.78rem;color:var(--text-muted);overflow-wrap:anywhere}
+.brand-project{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px;
+  font-weight:500;color:var(--text-secondary);min-width:0}
 .brand-project-name{font-family:var(--font-mono);font-size:.85em;font-weight:500;padding:1px 5px;
-  border-radius:var(--radius-sm);background:var(--bg-overlay);color:var(--accent-primary)}
-.topbar-actions{display:flex;align-items:center;gap:var(--sp-2)}
+  border-radius:var(--radius-sm);background:var(--bg-overlay);color:var(--accent-primary);
+  max-width:100%;overflow-wrap:anywhere}
+.topbar-actions{display:flex;align-items:center;gap:var(--sp-2);flex-shrink:0;flex-wrap:wrap}
 
 /* Theme toggle */
 .theme-toggle{display:inline-flex;align-items:center;gap:var(--sp-1);
@@ -284,9 +287,15 @@
 # ---------------------------------------------------------------------------
 
 _TABLES = """\
-.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg);
-  margin-bottom:var(--sp-4)}
-.table{width:100%;border-collapse:collapse;font-size:.82rem;font-family:var(--font-mono)}
+.table-wrap{display:block;inline-size:100%;max-inline-size:100%;min-inline-size:0;overflow-x:auto;
+  overflow-y:hidden;border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:var(--sp-4);
+  background:
+    linear-gradient(to right,var(--bg-surface) 30%,transparent) left center / 40px 100% no-repeat local,
+    linear-gradient(to left,var(--bg-surface) 30%,transparent) right center / 40px 100% no-repeat local,
+    linear-gradient(to right,rgba(0,0,0,.15),transparent) left center / 14px 100% no-repeat scroll,
+    linear-gradient(to left,rgba(0,0,0,.15),transparent) right center / 14px 100% no-repeat scroll}
+.table{inline-size:max-content;min-inline-size:100%;border-collapse:collapse;font-size:.82rem;
+  font-family:var(--font-mono)}
 .table th{position:sticky;top:0;z-index:2;padding:var(--sp-2) var(--sp-3);text-align:left;font-family:var(--font-sans);
   font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;
   color:var(--text-muted);background:var(--bg-overlay);border-bottom:1px solid var(--border);
@@ -300,10 +309,11 @@
 .table tr:last-child td{border-bottom:none}
 .table tr:hover td{background:var(--bg-raised)}
 .table .col-name{font-weight:500;color:var(--text-primary)}
-.table .col-file{color:var(--text-muted);max-width:240px;overflow:hidden;
+.table .col-file,.table .col-path{color:var(--text-muted);max-width:240px;overflow:hidden;
   text-overflow:ellipsis;white-space:nowrap}
-.table .col-number{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
-.table .col-risk{white-space:nowrap}
+.table .col-number,.table .col-num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
+.table .col-risk,.table .col-badge,.table .col-cat{white-space:nowrap}
+.table .col-steps{max-width:120px;word-break:break-word}
 .table .col-wide{max-width:320px;word-break:break-all}
 .table-empty{padding:var(--sp-8);text-align:center;color:var(--text-muted);font-size:.9rem}
 """
@@ -478,6 +488,12 @@
 }
 @media(max-width:520px){
   .overview-kpi-cards{grid-template-columns:1fr}
+  .overview-kpi-cards .meta-item{grid-template-rows:auto auto auto;align-content:start;
+    min-height:0}
+  .overview-kpi-cards .meta-item .meta-label{min-height:0}
+  .overview-kpi-cards .meta-item .meta-value{padding-top:0}
+  .overview-kpi-cards .kpi-detail{align-self:start}
+  .overview-kpi-cards .kpi-micro{max-width:100%;white-space:normal;overflow-wrap:anywhere}
 }
 
 /* Health gauge */
@@ -510,7 +526,7 @@
   background:var(--bg-alt)}
 
 /* Badge modal */
-.badge-modal{max-width:540px;width:90vw;max-height:85vh}
+.badge-modal{max-width:680px;width:92vw;max-height:85vh}
 .badge-modal .modal-head{display:flex;align-items:center;justify-content:space-between;
   padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border)}
 .badge-modal .modal-head h2{font-size:1rem;font-weight:700;margin:0}
@@ -916,12 +932,19 @@
 /* Provenance summary badges */
 .prov-summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
   padding:var(--sp-2) var(--sp-4);border-top:1px solid var(--border)}
-.prov-badge{font-size:.65rem;font-weight:600;padding:2px 8px;
-  border-radius:10px;white-space:nowrap;display:inline-flex;align-items:center;gap:3px}
-.prov-badge.green{background:var(--success-muted);color:var(--success)}
-.prov-badge.red{background:var(--error-muted);color:var(--error)}
-.prov-badge.amber{background:var(--warning-muted);color:var(--warning)}
-.prov-badge.neutral{background:var(--bg-overlay);color:var(--text-muted)}
+.prov-badge{display:inline-flex;align-items:center;gap:4px;font-size:.66rem;
+  padding:2px 8px;border-radius:var(--radius-sm);background:var(--bg-raised);
+  white-space:nowrap;line-height:1.3;border:1px solid color-mix(in srgb,var(--border) 55%,transparent)}
+.prov-badge-val{font-weight:600;font-variant-numeric:tabular-nums}
+.prov-badge-lbl{font-weight:400;color:var(--text-muted);text-transform:lowercase}
+.prov-badge--green{background:var(--success-muted);border-color:color-mix(in srgb,var(--success) 20%,transparent)}
+.prov-badge--green .prov-badge-val{color:var(--success)}
+.prov-badge--red{background:var(--error-muted);border-color:color-mix(in srgb,var(--error) 20%,transparent)}
+.prov-badge--red .prov-badge-val{color:var(--error)}
+.prov-badge--amber{background:var(--warning-muted);border-color:color-mix(in srgb,var(--warning) 20%,transparent)}
+.prov-badge--amber .prov-badge-val{color:var(--warning)}
+.prov-badge--neutral{background:var(--bg-overlay);border-color:color-mix(in srgb,var(--border) 75%,transparent)}
+.prov-badge--neutral .prov-badge-val{color:var(--text-secondary)}
 .prov-explain{font-size:.62rem;color:var(--text-muted);margin-left:auto;font-style:italic}
 """
 
@@ -1033,12 +1056,39 @@
   .overview-row-spread{margin-left:0;width:100%}
   .suggestion-head{flex-direction:column;align-items:flex-start}
   .suggestion-facts{grid-template-columns:1fr}
+  .sf-head{flex-direction:column;align-items:flex-start}
+  .sf-meta{width:100%}
   .container{padding:0 var(--sp-3)}
-  .main-tabs{padding:0 var(--sp-3)}
+  .topbar{position:static}
+  .topbar-inner{height:auto;padding:var(--sp-2) var(--sp-3);flex-direction:row;
+    align-items:center;gap:var(--sp-2)}
+  .brand{flex:1;min-width:0;align-items:center;gap:var(--sp-2)}
+  .brand-logo{width:24px;height:24px}
+  .brand-text{gap:0}
+  .brand h1{font-size:.85rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .brand-project-name{font-size:.78em;padding:0 3px}
+  .brand-meta{display:none}
+  .topbar-actions{flex-shrink:0;gap:var(--sp-1)}
+  .topbar-actions .btn-prov{font-size:0;gap:0;width:32px;height:32px;
+    padding:0;align-items:center;justify-content:center}
+  .topbar-actions .btn-prov .prov-dot{width:10px;height:10px}
+  .theme-toggle{font-size:0;gap:0;width:32px;height:32px;
+    padding:0;align-items:center;justify-content:center}
+  .theme-toggle svg{width:16px;height:16px}
+  .main-tabs-wrap{position:sticky;top:0;z-index:90;padding:var(--sp-2) 0 0}
+  .main-tabs{padding:var(--sp-1);gap:2px;
+    background:
+      linear-gradient(to right,var(--bg-surface) 30%,transparent) left center / 28px 100% no-repeat local,
+      linear-gradient(to left,var(--bg-surface) 30%,transparent) right center / 28px 100% no-repeat local,
+      linear-gradient(to right,rgba(0,0,0,.12),transparent) left center / 10px 100% no-repeat scroll,
+      linear-gradient(to left,rgba(0,0,0,.12),transparent) right center / 10px 100% no-repeat scroll,
+      var(--bg-surface)}
+  .main-tab{flex:none;padding:var(--sp-1) var(--sp-2);font-size:.78rem}
 }
 @media(max-width:480px){
   .overview-kpi-grid{grid-template-columns:1fr}
   .search-box input[type="text"]{width:140px}
+  .brand-logo{width:28px;height:28px}
 }
 
 /* Print */

codeclone/_html_report/_sections/_meta.py

@@ -333,36 +333,41 @@ def _section_html(title: str, rows: list[tuple[str, object]]) -> str:
         _section_html(st, rows) for st, rows in meta_sections if rows
     )
 
-    def _prov_badge(label: str, color: str) -> str:
-        return f'<span class="prov-badge {color}">{_escape_html(label)}</span>'
+    def _prov_badge(label: str, value: str, color: str) -> str:
+        return (
+            f'<span class="prov-badge prov-badge--{color}">'
+            f'<span class="prov-badge-val">{_escape_html(value)}</span>'
+            f'<span class="prov-badge-lbl">{_escape_html(label)}</span>'
+            "</span>"
+        )
 
     badges: list[str] = []
     if _bl_verified is True:
-        badges.append(_prov_badge("Baseline verified", "green"))
+        badges.append(_prov_badge("Baseline", "verified", "green"))
     elif _bl_loaded is True and _bl_verified is not True:
-        badges.append(_prov_badge("Baseline untrusted", "red"))
+        badges.append(_prov_badge("Baseline", "untrusted", "red"))
     elif _bl_loaded is False or _bl_loaded is None:
-        badges.append(_prov_badge("Baseline missing", "amber"))
+        badges.append(_prov_badge("Baseline", "missing", "amber"))
     if ctx.report_schema_version:
-        badges.append(_prov_badge(f"Schema {ctx.report_schema_version}", "neutral"))
+        badges.append(_prov_badge("Schema", str(ctx.report_schema_version), "neutral"))
     if _bl_fp_ver is not None:
-        badges.append(_prov_badge(f"Fingerprint {_bl_fp_ver}", "neutral"))
+        badges.append(_prov_badge("Fingerprint", str(_bl_fp_ver), "neutral"))
     gen_name = str(_bl_gen_name or "")
     if gen_name and gen_name != "codeclone":
-        badges.append(_prov_badge(f"Generator mismatch: {gen_name}", "red"))
+        badges.append(_prov_badge("Generator mismatch", gen_name, "red"))
     if _cache_used is True:
-        badges.append(_prov_badge("Cache hit", "green"))
+        badges.append(_prov_badge("Cache", "hit", "green"))
     elif _cache_used is False:
-        badges.append(_prov_badge("Cache miss", "amber"))
+        badges.append(_prov_badge("Cache", "miss", "amber"))
     else:
-        badges.append(_prov_badge("Cache N/A", "neutral"))
+        badges.append(_prov_badge("Cache", "N/A", "neutral"))
     analysis_mode = str(_meta_pick(meta.get("analysis_mode")) or "")
     if analysis_mode:
-        badges.append(_prov_badge(f"Mode: {analysis_mode}", "neutral"))
+        badges.append(_prov_badge("Mode", analysis_mode, "neutral"))
     if _mbl_verified is True:
-        badges.append(_prov_badge("Metrics baseline verified", "green"))
+        badges.append(_prov_badge("Metrics baseline", "verified", "green"))
     elif _mbl_loaded is True and _mbl_verified is not True:
-        badges.append(_prov_badge("Metrics baseline untrusted", "red"))
+        badges.append(_prov_badge("Metrics baseline", "untrusted", "red"))
 
     prov_summary = (
         f'<div class="prov-summary">{"".join(badges)}'

docs/book/08-report.md

@@ -2,7 +2,7 @@
 
 ## Purpose
 
-Define report contracts in `2.0.0b1`: canonical JSON (`report_schema_version=2.1`)
+Define report contracts in `2.0.0b2`: canonical JSON (`report_schema_version=2.1`)
 plus deterministic TXT/Markdown/SARIF projections.
 
 ## Public surface

docs/book/appendix/b-schema-layouts.md

@@ -2,14 +2,14 @@
 
 ## Purpose
 
-Compact structural layouts for baseline/cache/report contracts in `2.0.0b1`.
+Compact structural layouts for baseline/cache/report contracts in `2.0.0b2`.
 
 ## Baseline schema (`2.0`)
 
 ```json
 {
   "meta": {
-    "generator": { "name": "codeclone", "version": "2.0.0b1" },
+    "generator": { "name": "codeclone", "version": "2.0.0b2" },
     "schema_version": "2.0",
     "fingerprint_version": "1",
     "python_tag": "cp313",
@@ -83,7 +83,7 @@ Notes:
 {
   "report_schema_version": "2.1",
   "meta": {
-    "codeclone_version": "2.0.0b1",
+    "codeclone_version": "2.0.0b2",
     "project_name": "codeclone",
     "scan_root": ".",
     "analysis_mode": "full",
@@ -264,7 +264,7 @@ Notes:
       "tool": {
         "driver": {
           "name": "codeclone",
-          "version": "2.0.0b1",
+          "version": "2.0.0b2",
           "rules": [
             {
               "id": "CCLONE001",

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "codeclone"
-version = "2.0.0b1"
+version = "2.0.0b2"
 description = "Structural code quality analysis for Python"
 readme = { file = "README.md", content-type = "text/markdown" }
 license = "MIT"
@@ -67,7 +67,7 @@ dev = [
     "build>=1.4.1",
     "twine>=5.0.0",
     "mypy>=1.19.1",
-    "ruff>=0.15.7",
+    "ruff>=0.15.8",
     "pre-commit>=4.5.1",
 ]