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.

2.0 KiB Raw Blame History