Widescreen Container Strategy

Problem

Current Tailwind container caps at max-width: 1536px (2xl breakpoint). On 4K/5K monitors (3840-5120px), content occupies only 30-40% of screen width. Product grids are locked at 4 columns (lg:grid-cols-4) and don't scale further.

Design Decisions

1. Scope: Only content pages (catalog, homepage, product detail) get wider layout. Forms, cabinet, and admin stay compact.
2. Grid strategy: auto-fill with minmax for automatic column scaling (no manual breakpoints).
3. Container strategy: Proportional max-width: 90vw — scales with any screen size, always leaves small margins.
4. Header/footer: Full-width background, inner content uses container-wide (aligned with page content).
5. Product detail: Gallery grows (flex-1), info block stays fixed (lg:w-[480px] lg:shrink-0).

Two Container Types

Container	Used in	Behavior
container-wide	Catalog, homepage, product detail, header/footer inner	max-width: 90vw, centered, responsive padding
container (default)	Cabinet, admin, auth forms	Standard Tailwind container (max 1536px)

CSS Utilities

@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;
}

Grid Scaling (grid-catalog with container-wide)

Screen	Container (90vw)	Columns	Card width
375px (mobile)	337px	1	~337px
768px (tablet)	691px	2	~330px
1280px (laptop)	1152px	4	~273px
1920px (FHD)	1728px	6	~272px
2560px (QHD)	2304px	8	~276px
3840px (4K)	3456px	13	~258px
5120px (5K)	4608px	17	~265px

Product Detail Page

<div class="container-wide">
  <div class="flex flex-col lg:flex-row gap-8">
    <div class="flex-1 min-w-0"><!-- gallery --></div>
    <div class="w-full lg:w-[480px] lg:shrink-0"><!-- info --></div>
  </div>
</div>

Screen	Gallery	Info block
Mobile	100% (stacked)	100% (stacked)
1280px	~672px	480px
1920px	~1216px	480px
3840px	~2944px	480px

Files to Change

Add utilities:

• app/assets/css/main.css — add @utility container-wide and @utility grid-catalog

Layouts (header/footer inner -> container-wide):

• app/layouts/default.vue — header and footer inner -> container-wide
• app/layouts/cabinet.vue — header -> container-wide, main content stays container
• app/layouts/admin.vue — header -> container-wide, main content stays container

Content pages (-> container-wide + grid-catalog):

• app/pages/index.vue — sections -> container-wide, product/category grids -> grid-catalog
• app/pages/catalog/index.vue — wrapper -> container-wide, product grid -> grid-catalog
• app/pages/product/[id].vue — wrapper -> container-wide, gallery flex-1 + info lg:w-[480px] lg:shrink-0
• app/pages/seller/[id].vue — if has product grid -> container-wide + grid-catalog

Do NOT change:

• app/pages/auth/* — stays container max-w-sm
• app/pages/cabinet/* — stays container
• app/pages/admin/* — stays container