# Checklist: Responsive UI Transition (800px constraint removal)

## 📋 Pre-Implementation
- [x] Identify hardcoded 800px constraints in JS/Vue files.
- [x] Verify baseline stability (`composer test`).

## 🛠️ Implementation

### 1. **Global Configuration in `resources/js/app.js`**
- [x] Locate the inline `<style>` template (Lines 251-260).
- [x] Modify `body` `max-width` from `800px` to `var(--layout-max-width, 100%)`.
- [x] Add `:root` variable `--layout-max-width: 1440px;` (or preferred max desktop width).
- [x] Standardize centering: `margin: 0 auto; width: 100%;`.

### 2. **Header Layout Adjustment (`TopHeader.vue`)**
- [x] Update `.header` `max-width: 800px` to `var(--layout-max-width, 100%)`.
- [x] Ensure `.tf-container` inside the header provides reasonable content padding/centering.

### 3. **Bottom Navigation Adjustment (`BottomNav.vue`)**
- [x] Update `.bottom-navigation-bar` `max-width: 800px` to `var(--layout-max-width, 100%)`.
- [x] Ensure the navigation bar stays centered at the bottom of the visible area.

### 4. **UI Store / Settings Sync**
- [x] Check if `uiStore.isFullWidth` correctly overrides these new variables (likely handled by the existing classes).

### 5. **Documentation**
- [x] Update `ai-docs/dictionary.md` with the new Layout Architecture details.

## ✅ Verification
- [ ] Build assets: `npm run build`.
- [ ] Restart container: `docker restart bukidbountyapp`.
- [ ] Verify landscape display on simulated devices (e.g., tablet landscape).
- [ ] Verify portrait display remains centered and mobile-friendly.
- [ ] Verify POS page still works in "Full Width" mode.