Widescreen Container Strategy — Implementation Plan

For Claude: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

Goal: Add proportional wide containers and auto-fill grids so content pages (catalog, homepage, product detail) use full screen width on 4K/5K monitors while cabinet/admin/auth pages stay compact.

Architecture: Two container types — container-wide (90vw, proportional) for content pages and header/footer, standard container (max 1536px) for everything else. Product grids use CSS Grid auto-fill with minmax(260px, 1fr) for automatic column scaling.

Tech Stack: Tailwind CSS 4 @utility directives, CSS Grid auto-fill, Nuxt 4 layouts/pages

Design doc: docs/plans/2026-02-10-widescreen-containers-design.md

---

Task 1: Add CSS utilities

Files:

• Modify: app/assets/css/main.css

Step 1: Add container-wide and grid-catalog utilities to main.css

After the existing html { font-size: 0.875rem; } block, add:

@utility container-wide {
  width: 100%;
  max-width: 90vw;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  @utility container-wide {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1024px) {
  @utility container-wide {
    padding-inline: 2rem;
  }
}

@utility grid-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

Step 2: Verify dev server compiles without errors

Run: npm run dev — check for CSS compilation errors in terminal.

Step 3: Commit

git add app/assets/css/main.css
git commit -m "feat(css): add container-wide and grid-catalog utilities for widescreen support"

---

Task 2: Update default layout (header + footer)

Files:

• Modify: app/layouts/default.vue

Step 1: Change header inner container

Line 25, replace:

<div class="container mx-auto px-4 py-3 flex items-center justify-between">

With:

<div class="container-wide py-3 flex items-center justify-between">

Step 2: Change footer inner container

Line 228, replace:

<div class="container mx-auto px-4 text-center text-sm text-gray-500 dark:text-gray-400">

With:

<div class="container-wide text-center text-sm text-gray-500 dark:text-gray-400">

Step 3: Verify visually

Open http://localhost:3000 — header and footer should look identical on normal screens, content should be aligned.

Step 4: Commit

git add app/layouts/default.vue
git commit -m "feat(layout): use container-wide in default header and footer"

---

Task 3: Update cabinet layout (header only)

Files:

• Modify: app/layouts/cabinet.vue

Step 1: Change header inner container

Line 8, replace:

<div class="container mx-auto px-4 py-3 flex items-center justify-between">

With:

<div class="container-wide py-3 flex items-center justify-between">

Main content area on line 35 stays unchanged (container mx-auto px-4).

Step 2: Commit

git add app/layouts/cabinet.vue
git commit -m "feat(layout): use container-wide in cabinet header"

---

Task 4: Update admin layout (header only)

Files:

• Modify: app/layouts/admin.vue

Step 1: Change header inner container

Line 23, replace:

<div class="container mx-auto px-4 py-3 flex items-center justify-between">

With:

<div class="container-wide py-3 flex items-center justify-between">

Main content area on line 78 stays unchanged (container mx-auto px-4).

Step 2: Commit

git add app/layouts/admin.vue
git commit -m "feat(layout): use container-wide in admin header"

---

Task 5: Update homepage

Files:

• Modify: app/pages/index.vue

Step 1: Change hero section container

Line 89, replace:

<div class="container mx-auto px-4 text-center">

With:

<div class="container-wide text-center">

Step 2: Change categories section container and grid

Line 144, replace:

<div class="container mx-auto px-4">

With:

<div class="container-wide">

Line 146, replace:

<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">

With:

<div class="grid grid-cols-2 gap-3 sm:grid-cols-3" style="grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));">

Note: categories use smaller minmax(180px, 1fr) since category cards are compact. We use inline style here because this grid has a different minmax than grid-catalog. On mobile (< 360px) the grid-cols-2 class ensures minimum 2 columns.

Actually, simpler approach — just remove manual breakpoint classes and use a single auto-fill:

Line 146, replace:

<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">

With:

<div class="grid gap-3" style="grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));">

Step 3: Change listings section container and grids

Line 162, replace:

<div class="container mx-auto px-4">

With:

<div class="container-wide">

Line 173 (skeleton grid), replace:

class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4"

With:

class="grid-catalog"

Line 191 (products grid), replace:

class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4"

With:

class="grid-catalog"

Step 4: Verify visually

Open http://localhost:3000 — hero, categories, and listings sections should scale smoothly when resizing browser window.

Step 5: Commit

git add app/pages/index.vue
git commit -m "feat(home): use container-wide and auto-fill grids for widescreen support"

---

Task 6: Update catalog page

Files:

• Modify: app/pages/catalog/index.vue

Step 1: Change outer container

Line 113, replace:

<div class="container mx-auto px-4 py-6">

With:

<div class="container-wide py-6">

Step 2: Change product grid

Line 235, replace:

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">

With:

<div class="grid-catalog">

Step 3: Verify visually

Open http://localhost:3000/catalog — filters sidebar should remain fixed at lg:w-72, product grid should auto-fill the remaining space.

Step 4: Commit

git add app/pages/catalog/index.vue
git commit -m "feat(catalog): use container-wide and grid-catalog for widescreen support"

---

Task 7: Update product detail page

Files:

• Modify: app/pages/product/[id].vue

Step 1: Change error state container

Line 64, replace:

<div v-if="error" class="container mx-auto px-4 py-12 text-center">

With:

<div v-if="error" class="container-wide py-12 text-center">

Step 2: Change main container

Line 70, replace:

<div v-else-if="product" class="container mx-auto px-4 py-6">

With:

<div v-else-if="product" class="container-wide py-6">

Step 3: Change gallery from 50/50 to flex-1 + fixed info

Line 73, replace:

<div class="lg:w-1/2">

With:

<div class="flex-1 min-w-0">

Line 102, replace:

<div class="lg:w-1/2">

With:

<div class="w-full lg:w-[480px] lg:shrink-0">

Step 4: Verify visually

Open a product page — gallery should take remaining space, info block should be fixed ~480px on desktop.

Step 5: Commit

git add app/pages/product/[id].vue
git commit -m "feat(product): use container-wide with flex gallery layout for widescreen"

---

Task 8: Update seller page

Files:

• Modify: app/pages/seller/[id].vue

Step 1: Change container

Line 7, replace:

<div class="container mx-auto px-4 py-8">

With:

<div class="container-wide py-8">

Step 2: Commit

git add app/pages/seller/[id].vue
git commit -m "feat(seller): use container-wide for widescreen support"

---

Task 9: Final verification

Step 1: Run linter

npm run lint

Expected: No new errors.

Step 2: Run typecheck

npm run typecheck

Expected: No new errors.

Step 3: Visual check at multiple widths

Open browser dev tools, test responsive mode at these widths:

• 375px (mobile)
• 768px (tablet)
• 1280px (laptop)
• 1920px (FHD)
• 2560px+ (simulate widescreen)

Check pages: /, /catalog, /product/{id}, /cabinet, /admin/products

Verify:

• Homepage grids scale with screen width
• Catalog grid auto-fills, filters sidebar stays fixed
• Product detail gallery grows, info stays ~480px
• Cabinet and admin pages are unchanged (standard container)
• Header/footer inner content aligns with page content

Step 4: Commit docs

git add docs/plans/
git commit -m "docs: add widescreen container design and implementation plan"