Craze-Data-check/docs/superpowers/specs/2026-04-22-maximize-tab-design.md

Maximize Tab View — Spec

Concept & Vision

Each tab view (Matrix, Product Descriptions, Dimensions, etc.) can be maximized to fullscreen mode, hiding all navigation chrome (Sidebar, TopBar) to maximize data visibility. A floating close button allows returning to normal view. The effect is immersive and focused — like pressing F11 in a browser.

Design

Normal Mode

• Sidebar (240px) visible on left
• TopBar visible on top
• Main content fills remaining space

Maximized Mode

• Sidebar: display: none
• TopBar: display: none
• Fullscreen overlay covers entire viewport
• Background: #041021 (matches main content bg)
• Content area: max-height 100vh, overflow scroll
• Floating close button: top-right corner, fixed position

Close Button

• Position: fixed, top-right
• Size: 40x40px
• Background: rgba(30, 41, 59, 0.9) with blur
• Border: 1px slate-600
• Icon: X from lucide-react, white, 20px
• Hover: bg slate-700, scale 1.05
• Z-index: 50
• Tooltip: "Exit fullscreen"

Layout & Structure

Implementation Pattern

Each view component receives isFullscreen?: boolean prop and renders:

{maximizeButton && (
  <button onClick={toggleFullscreen} className="..." title="Fullscreen">
    <Maximize2 />
  </button>
)}

{isFullscreen ? (
  <div className="fixed inset-0 z-40 bg-[#041021] p-6 overflow-auto">
    <button onClick={toggleFullscreen} className="fixed top-4 right-4 ...">
      <X />
    </button>
    {/* Tab content rendered at full height */}
  </div>
) : (
  <div className="...">
    {/* Tab content normal */}
  </div>
)}

State Management

• Each tab manages its own isFullscreen state locally
• No global state needed — each tab remembers its own fullscreen mode
• State resets to normal when switching tabs (intentional)

Features & Interactions

Toggle Button

• Location: Each tab view has a maximize button (icon) in its header area
• Icon: Maximize2 from lucide-react
• Click: Enter fullscreen mode
• Hover: Slight scale increase, cursor pointer

Exit Fullscreen

• Click floating X button
• Instantly returns to normal layout
• No animation needed

Component Inventory

MaximizeButton (in each tab header)

• States: default, hover
• Color: slate-400 default, slate-200 hover

FullscreenCloseButton (floating)

• States: default, hover, active
• Default: semi-transparent dark bg, subtle border
• Hover: lighter bg, slight scale
• Z-index ensures it's above all content

FullscreenOverlay

• Fixed positioning
• Matches app background color
• Contains scrollable content

Technical Approach

• Add isFullscreen state to each view component
• Add toggle function
• Conditional rendering based on state
• Icons from lucide-react: Maximize2, X
• All styling via Tailwind classes
• No additional dependencies

Affected Components

1. ProductDescriptions.tsx
2. MatrixView.tsx
3. DimensionsView.tsx
4. PricingView.tsx
5. ArticleDetails.tsx
6. PendingValidationView.tsx
7. MissingDataView.tsx
8. HistoryView.tsx