# High-Level Plan: Responsive UI Transition

## Objective
Analyze and resolve the "portrait-only" feel of the UI by removing hardcoded maximum width constraints (800px) and implementing a responsive, centered layout that supports landscape and ultra-wide displays.

## Background
The application currently injects a global style into the `<head>` via `resources/js/app.js` that limits the `body` to `max-width: 800px`. This design choice, while good for mobile-first "superapps", prevents the UI from utilizing desktop or landscape screen real estate, causing it to appear as a narrow column.

## Technical Approach

### 1. Centralized Layout Configuration
- Introduce CSS variables in `:root` or `body` to define `---layout-max-width`.
- Default the max-width to a more modern value (e.g., `1440px`) or set it to `none` for full responsiveness with internal containers.

### 2. Update Global Styles (app.js)
- Modify the `body` style injection in `resources/js/app.js`.
- Change `max-width: 800px` to a responsive variable or remove it.
- Ensure `margin: 0 auto` is maintained to keep the content centered on large screens.

### 3. Component Updates
- **TopHeader.vue**: Update `.header` to use the new layout width.
- **BottomNav.vue**: Update `.bottom-navigation-bar` to use the new layout width.
- **Containers**: Ensure `.tf-container` classes throughout the app are configured to limit content width to a readable measure (e.g., 1200px) while allowing the background/header to span wider.

### 4. Responsiveness
- Ensure that on mobile, the UI still behaves as expected (100% width).
- On landscape/desktop, the UI should expand or stay centered without being artificially "pinched" to 800px.

## Affected Files
- `resources/js/app.js`
- `resources/js/Pages/Core/Fragments/TopHeader.vue`
- `resources/js/Pages/Core/Fragments/BottomNav.vue`
- `ai-docs/dictionary.md` (Update layout definitions)

## Verification
- Visual inspection on different screen sizes (Mobile, Tablet, Desktop, Landscape).
- Verify `is-full-width` mode (used for POS) still works correctly.
