Add horizontal scroll fix story and implement it in story 08 and upd…

docs_v2/08_Features/019_swipe_workflow_modes/stories/08_horizontal_scroll_fix/019_08_design.md

@@ -0,0 +1,53 @@
+# Horizontal Scroll Fix — Story Design
+
+**Feature ID:** 019
+**Story ID:** 019-08
+**Parent Feature:** swipe_workflow_modes
+**Design Version:** 1.0
+**Date:** 2025-12-06
+**Status:** Design Review
+**Story Definition:** 019_08_horizontal_scroll_fix.md
+**Parent Feature Design:** ../../019_design.md
+
+## 1. Summary
+Fix layout CSS to prevent horizontal scrolling, ensuring swipe gestures are interpreted correctly by the app logic rather than the browser moving the page.
+
+## 2. Root Cause Analysis
+- **Box Sizing:** `width: 100%` + `padding` on `main` causes overflow without `box-sizing: border-box`.
+- **Preformatted Text:** The `<pre>` tag for metadata defaults to `white-space: pre`, which forces width expansion for long JSON lines.
+- **Header/Main:** Flex containers might not be shrinking correctly on small screens.
+
+## 3. Solution
+### 3.1 CSS Updates
+```css
+/* Reset box model */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body {
+  /* Prevent horizontal scroll */
+  overflow-x: hidden;
+  width: 100%;
+}
+
+pre {
+  /* Force wrapping for JSON data */
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-x: auto; /* Fallback scroll if needed, but perfer wrap */
+  max-width: 100%;
+}
+
+img {
+  max-width: 100%; /* Ensure images never overflow */
+}
+```
+
+## 4. Risks
+- `overflow-x: hidden` might hide content if layout is actually broken.
+- `pre-wrap` might make JSON look taller. (Acceptable).
+
+## 5. Work Plan
+- Task 1: Apply CSS fixes in `index.html`.
+

docs_v2/08_Features/019_swipe_workflow_modes/stories/08_horizontal_scroll_fix/019_08_horizontal_scroll_fix.md

@@ -0,0 +1,28 @@
+# Story: Horizontal Scroll Fix
+
+**Feature ID:** 019
+**Story ID:** 019-08
+**Name:** horizontal_scroll_fix
+**Status:** Proposed
+**Date:** 2025-12-06
+**Parent Feature:** 019_swipe_workflow_modes
+
+## Summary
+Eliminate horizontal scrolling on the page to ensure swipe gestures work reliably without moving the viewport.
+The issue is likely caused by:
+1. Missing `box-sizing: border-box` causing padding to add to width.
+2. Unwrapped content in `<pre>` tags (metadata display).
+3. Overflowing elements in mobile view.
+
+## Scope
+- Update `index.html` CSS.
+- Add global `box-sizing: border-box`.
+- Add `body { overflow-x: hidden; }`.
+- Update `pre` styles to wrap text.
+- Verify main container width constraints.
+
+## Acceptance Criteria
+- No horizontal scrolling on the page body.
+- Swipe gestures do not trigger page scrolling.
+- Metadata/JSON content wraps within the panel.
+

docs_v2/08_Features/019_swipe_workflow_modes/stories/08_horizontal_scroll_fix/019_08_plan.yaml

@@ -0,0 +1,41 @@
+# docs_v2/08_Features/019_swipe_workflow_modes/stories/08_horizontal_scroll_fix/019_08_plan.yaml
+
+version: "1.0"
+feature_id: "019"
+story_id: "019-08"
+story_name: "horizontal_scroll_fix"
+design_ref: "019_08_design.md"
+
+summary: |
+  Fix horizontal scrolling issues to improve swipe gesture reliability.
+
+repo_constraints:
+  allowed_paths:
+    - "publisher_v2/src/publisher_v2/web/templates/index.html"
+  excluded_paths: []
+
+acceptance_criteria:
+  - id: AC1
+    description: "Page body has no horizontal scroll"
+    test_ref: "manual_verification"
+  - id: AC2
+    description: "Metadata JSON wraps instead of causing overflow"
+    test_ref: "manual_verification"
+
+tasks:
+  - id: task_01
+    type: code
+    description: "Add box-sizing reset and overflow-x fixes to CSS"
+    file: "publisher_v2/src/publisher_v2/web/templates/index.html"
+    depends_on: []
+
+quality_gates:
+  tests_pass: true
+  coverage_delta_min: 0
+  no_new_lint_errors: true
+
+release:
+  feature_flag: null
+  rollout_strategy: "direct"
+  rollback_plan: "revert changes to index.html"
+

docs_v2/08_Features/019_swipe_workflow_modes/stories/08_horizontal_scroll_fix/019_08_summary.md

@@ -0,0 +1,32 @@
+# Story Summary: Horizontal Scroll Fix
+
+**Feature ID:** 019
+**Story ID:** 019-08
+**Status:** Shipped
+**Date Completed:** 2025-12-06
+
+## Summary
+Fixed horizontal scrolling issues on the web interface to ensure reliable swipe gesture handling.
+- Added global `box-sizing: border-box` reset to prevent padding from expanding element widths unexpectedly.
+- Added `overflow-x: hidden` to the `body` to catch any remaining overflow.
+- Updated `pre` tags to use `white-space: pre-wrap` and `word-wrap: break-word`, ensuring JSON metadata displays do not force the page to scroll horizontally.
+
+## Files Changed
+### Source Files
+- `publisher_v2/src/publisher_v2/web/templates/index.html` — Updated CSS.
+
+### Documentation
+- `docs_v2/08_Features/019_swipe_workflow_modes/stories/08_horizontal_scroll_fix/019_08_design.md`
+- `docs_v2/08_Features/019_swipe_workflow_modes/stories/08_horizontal_scroll_fix/019_08_plan.yaml`
+
+## Test Results
+- Tests: N/A (Frontend CSS)
+- Coverage: N/A
+
+## Acceptance Criteria Status
+- [x] AC1: No body horizontal scroll
+- [x] AC2: JSON metadata wraps correctly
+
+## Follow-up Items
+- None.
+

publisher_v2/src/publisher_v2/web/templates/index.html

@@ -5,6 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>{{ web_ui_text.title or "Publisher V2 Web" }}</title>
   <style>
+    *, *::before, *::after {
+      box-sizing: border-box;
+    }
     body {
       font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
       margin: 0;
@@ -14,6 +17,8 @@
       display: flex;
       flex-direction: column;
       min-height: 100vh;
+      width: 100%;
+      overflow-x: hidden;
       transition: background-color 0.2s ease;
     }
     body.admin-mode {
@@ -184,6 +189,12 @@
       font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
       font-size: 0.8rem;
     }
+    pre {
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      overflow-x: auto;
+      max-width: 100%;
+    }
     .hidden {
       display: none !important;
     }