Context
The Pyramidize view uses a tabbed layout for Original and Editor content (text-enhancement.component.ts:263-267). On wide monitors, the canvas area (flex: 1) stretches horizontally but the tabs still stack content vertically — wasting screen real estate.
Current Layout
┌──────────┬─────────────────────────────────────────┬───────────┐
│ Controls │ [Original] [Editor] ← tabs │ Trace Log │
│ 280px │ ┌──────────────────────────────────┐ │ 260px │
│ │ │ only one visible at a time │ │ │
│ │ └──────────────────────────────────┘ │ │
└──────────┴─────────────────────────────────────────┴───────────┘
Expected (wide screens)
┌──────────┬──────────────────┬──────────────────┬───────────┐
│ Controls │ Original │ Editor │ Trace Log │
│ 280px │ │ │ 260px │
│ │ │ │ │
└──────────┴──────────────────┴──────────────────┴───────────┘
On wide viewports, Original and Editor should display side by side (no tabs). On narrower viewports, fall back to the current tabbed layout.
Relevant Code
frontend/src/app/features/text-enhancement/text-enhancement.component.ts:263-267 — tab structure
frontend/src/app/features/text-enhancement/text-enhancement.component.ts:676-686 — .canvas-area styles
frontend/src/app/features/text-enhancement/text-enhancement.component.ts:699-746 — .tabs-container styles
- No
max-width on the pyramidize page — it already fills available width
Acceptance Criteria
Context
The Pyramidize view uses a tabbed layout for Original and Editor content (
text-enhancement.component.ts:263-267). On wide monitors, the canvas area (flex: 1) stretches horizontally but the tabs still stack content vertically — wasting screen real estate.Current Layout
Expected (wide screens)
On wide viewports, Original and Editor should display side by side (no tabs). On narrower viewports, fall back to the current tabbed layout.
Relevant Code
frontend/src/app/features/text-enhancement/text-enhancement.component.ts:263-267— tab structurefrontend/src/app/features/text-enhancement/text-enhancement.component.ts:676-686—.canvas-areastylesfrontend/src/app/features/text-enhancement/text-enhancement.component.ts:699-746—.tabs-containerstylesmax-widthon the pyramidize page — it already fills available widthAcceptance Criteria