Skip to content

Pyramidize: show Original and Editor side by side on wide screens #27

@0xMMA

Description

@0xMMA

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

  • Above a breakpoint, Original and Editor panels display side by side
  • Below the breakpoint, falls back to current tabbed layout
  • Both panels remain independently scrollable
  • Trace log panel still works (collapsible) alongside the split view

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions