# 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 `` 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.