From 3b3959ced0e57f6853cf62989d1f19ecfc8a5d69 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 9 Apr 2026 20:05:10 +0700
Subject: [PATCH] Align catalog detail page geometry

---
 .../catalog/CatalogConfigurator.vue           | 136 +++++++++---------
 1 file changed, 67 insertions(+), 69 deletions(-)

diff --git a/app/components/catalog/CatalogConfigurator.vue b/app/components/catalog/CatalogConfigurator.vue
index 2aa3bfa..06e558b 100644
--- a/app/components/catalog/CatalogConfigurator.vue
+++ b/app/components/catalog/CatalogConfigurator.vue
@@ -626,11 +626,11 @@ function productDetailPath(group: ProductGroup) {
   <section class="space-y-5">
     <div v-if="loading" class="alert surface-card border-0">Загрузка каталога...</div>
     <div v-else-if="error" class="alert alert-error">{{ error.message }}</div>
-    <div v-else-if="selectedGroup" class="relative mx-auto max-w-[1380px] px-1 pb-10 sm:px-0">
+    <div v-else-if="selectedGroup" class="relative pb-10">
       <NuxtLink
         v-if="previousGroup"
         :to="productDetailPath(previousGroup)"
-        class="absolute left-0 top-28 z-10 hidden w-44 -translate-x-[108%] rounded-[28px] border border-[#e6efe9] bg-white p-3 shadow-[0_20px_40px_rgba(18,56,36,0.08)] transition hover:-translate-x-[114%] hover:shadow-[0_28px_48px_rgba(18,56,36,0.12)] 2xl:block"
+        class="absolute left-[-212px] top-28 z-10 hidden w-44 rounded-[28px] border border-[#e6efe9] bg-white p-3 shadow-[0_20px_40px_rgba(18,56,36,0.08)] transition hover:-translate-x-2 hover:shadow-[0_28px_48px_rgba(18,56,36,0.12)] 2xl:block"
       >
         <img
           :src="createProductCover(previousGroup.typeLabel, previousGroup.key)"
@@ -644,7 +644,7 @@ function productDetailPath(group: ProductGroup) {
       <NuxtLink
         v-if="nextGroup"
         :to="productDetailPath(nextGroup)"
-        class="absolute right-0 top-28 z-10 hidden w-44 translate-x-[108%] rounded-[28px] border border-[#e6efe9] bg-white p-3 shadow-[0_20px_40px_rgba(18,56,36,0.08)] transition hover:translate-x-[114%] hover:shadow-[0_28px_48px_rgba(18,56,36,0.12)] 2xl:block"
+        class="absolute right-[-212px] top-28 z-10 hidden w-44 rounded-[28px] border border-[#e6efe9] bg-white p-3 shadow-[0_20px_40px_rgba(18,56,36,0.08)] transition hover:translate-x-2 hover:shadow-[0_28px_48px_rgba(18,56,36,0.12)] 2xl:block"
       >
         <img
           :src="createProductCover(nextGroup.typeLabel, nextGroup.key)"
@@ -655,7 +655,7 @@ function productDetailPath(group: ProductGroup) {
         <p class="mt-3 text-sm font-semibold leading-5 text-[#163624]">{{ nextGroup.typeLabel }}</p>
       </NuxtLink>
 
-      <header class="mb-5 flex items-center gap-4 px-3 sm:px-6 xl:px-8">
+      <header class="mb-5 flex items-center gap-4">
         <NuxtLink
           to="/products"
           class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-[#dce9e1] bg-white text-xl text-[#163624] shadow-[0_10px_24px_rgba(18,56,36,0.06)] transition hover:-translate-y-0.5"
@@ -669,7 +669,7 @@ function productDetailPath(group: ProductGroup) {
         </div>
       </header>
 
-      <div class="mb-5 grid gap-3 px-3 sm:px-6 2xl:hidden">
+      <div class="mb-5 grid gap-3 2xl:hidden">
         <NuxtLink
           v-if="previousGroup"
           :to="productDetailPath(previousGroup)"
@@ -699,7 +699,7 @@ function productDetailPath(group: ProductGroup) {
         </NuxtLink>
       </div>
 
-      <div class="grid gap-5 px-3 sm:px-6 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.15fr)_320px] xl:px-8">
+      <div class="grid gap-5 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.15fr)_320px]">
         <div class="space-y-3">
           <div class="overflow-hidden rounded-[32px] border border-[#e6efe9] bg-white p-4 shadow-[0_20px_40px_rgba(18,56,36,0.06)]">
             <img
@@ -765,7 +765,7 @@ function productDetailPath(group: ProductGroup) {
 
         <aside class="self-start xl:sticky xl:top-24">
           <div class="rounded-[30px] border border-[#e6efe9] bg-white p-5 shadow-[0_24px_48px_rgba(18,56,36,0.08)]">
-            <p class="mt-2 text-2xl font-bold leading-tight text-[#163624]">{{ articleLabel(selectedGroup) }}</p>
+            <p class="mt-1 text-lg font-medium leading-tight text-[#163624]">{{ articleLabel(selectedGroup) }}</p>
 
             <button
               v-if="selectedQty(selectedGroup) === 0"
@@ -800,74 +800,72 @@ function productDetailPath(group: ProductGroup) {
         </aside>
       </div>
 
-      <div class="mt-8 px-3 sm:px-6 xl:px-8">
-        <div class="rounded-[32px] border border-[#e6efe9] bg-white p-5 shadow-[0_20px_40px_rgba(18,56,36,0.06)]">
-          <p class="text-base font-semibold text-[#163624]">Доступные варианты</p>
+      <div class="mt-8">
+        <p class="mb-4 text-base font-semibold text-[#163624]">Доступные варианты</p>
 
-          <div class="mt-4 overflow-x-auto rounded-[24px] border border-[#edf4ef]">
-            <table class="table bg-white">
-              <thead>
-                <tr class="text-[#587064]">
-                  <th>SKU</th>
-                  <th>Ширина</th>
-                  <th>Длина</th>
-                  <th>Толщина</th>
-                  <th>Втулка</th>
-                  <th>Цвет</th>
-                  <th>Надпись</th>
-                  <th>Остаток</th>
-                  <th class="text-right">Действие</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="product in selectedGroup.products" :key="`${selectedGroup.key}-${product.id}`" class="align-middle">
-                  <td class="font-semibold text-[#163624]">{{ product.sku }}</td>
-                  <td>{{ product.widthMm ?? '—' }}</td>
-                  <td>{{ product.lengthM ?? '—' }}</td>
-                  <td>{{ product.thicknessMicron ?? '—' }}</td>
-                  <td>{{ product.sleeveBrand ?? '—' }}</td>
-                  <td>{{ product.colorTags.join(', ') || '—' }}</td>
-                  <td>{{ product.labelTags.join(', ') || '—' }}</td>
-                  <td>
-                    <div class="flex min-w-[180px] items-center gap-3">
-                      <span class="h-3 w-3 rounded-sm" :class="availabilityTone(product)" />
-                      <div class="min-w-0">
-                        <p class="text-sm font-medium text-[#163624]">{{ availabilityLabel(product) }}</p>
-                        <p class="text-xs text-[#607569]">
-                          {{ totalAvailableQty(product) }}<span v-if="warehouseAvailability(product)"> · {{ warehouseAvailability(product) }}</span>
-                        </p>
-                      </div>
+        <div class="overflow-x-auto rounded-[24px] border border-[#edf4ef] bg-white">
+          <table class="table bg-white">
+            <thead>
+              <tr class="text-[#587064]">
+                <th>SKU</th>
+                <th>Ширина</th>
+                <th>Длина</th>
+                <th>Толщина</th>
+                <th>Втулка</th>
+                <th>Цвет</th>
+                <th>Надпись</th>
+                <th>Остаток</th>
+                <th class="text-right">Действие</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="product in selectedGroup.products" :key="`${selectedGroup.key}-${product.id}`" class="align-middle">
+                <td class="font-semibold text-[#163624]">{{ product.sku }}</td>
+                <td>{{ product.widthMm ?? '—' }}</td>
+                <td>{{ product.lengthM ?? '—' }}</td>
+                <td>{{ product.thicknessMicron ?? '—' }}</td>
+                <td>{{ product.sleeveBrand ?? '—' }}</td>
+                <td>{{ product.colorTags.join(', ') || '—' }}</td>
+                <td>{{ product.labelTags.join(', ') || '—' }}</td>
+                <td>
+                  <div class="flex min-w-[180px] items-center gap-3">
+                    <span class="h-3 w-3 rounded-sm" :class="availabilityTone(product)" />
+                    <div class="min-w-0">
+                      <p class="text-sm font-medium text-[#163624]">{{ availabilityLabel(product) }}</p>
+                      <p class="text-xs text-[#607569]">
+                        {{ totalAvailableQty(product) }}<span v-if="warehouseAvailability(product)"> · {{ warehouseAvailability(product) }}</span>
+                      </p>
                     </div>
-                  </td>
-                  <td class="text-right">
+                  </div>
+                </td>
+                <td class="text-right">
+                  <button
+                    v-if="getQuantity(product.id) === 0"
+                    class="btn h-10 rounded-full border-0 bg-[#139957] px-5 text-sm font-semibold text-white hover:bg-[#0d854a]"
+                    @click="incrementProduct(product)"
+                  >
+                    В корзину
+                  </button>
+                  <div v-else class="ml-auto flex w-32 items-center justify-between rounded-[20px] border border-[#dce9e1] bg-white px-2 py-2">
                     <button
-                      v-if="getQuantity(product.id) === 0"
-                      class="btn h-10 rounded-full border-0 bg-[#139957] px-5 text-sm font-semibold text-white hover:bg-[#0d854a]"
+                      class="btn btn-xs btn-square border-0 bg-[#f3f7f4] text-[#163624] shadow-none hover:bg-[#eaf2ec]"
+                      :disabled="getQuantity(product.id) === 0"
+                      @click="decrementProduct(product.id)"
+                    >
+                      -
+                    </button>
+                    <span class="min-w-8 text-center text-sm font-semibold text-[#163624]">{{ getQuantity(product.id) }}</span>
+                    <button
+                      class="btn btn-xs btn-square border-0 bg-[#f3f7f4] text-[#163624] shadow-none hover:bg-[#eaf2ec]"
                       @click="incrementProduct(product)"
                     >
-                      В корзину
+                      +
                     </button>
-                    <div v-else class="ml-auto flex w-32 items-center justify-between rounded-[20px] border border-[#dce9e1] bg-white px-2 py-2">
-                      <button
-                        class="btn btn-xs btn-square border-0 bg-[#f3f7f4] text-[#163624] shadow-none hover:bg-[#eaf2ec]"
-                        :disabled="getQuantity(product.id) === 0"
-                        @click="decrementProduct(product.id)"
-                      >
-                        -
-                      </button>
-                      <span class="min-w-8 text-center text-sm font-semibold text-[#163624]">{{ getQuantity(product.id) }}</span>
-                      <button
-                        class="btn btn-xs btn-square border-0 bg-[#f3f7f4] text-[#163624] shadow-none hover:bg-[#eaf2ec]"
-                        @click="incrementProduct(product)"
-                      >
-                        +
-                      </button>
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       </div>
     </div>