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`