From 21ce43b790efce399cf85821b9adbe7a9e1f2402 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 9 Apr 2026 14:43:58 +0700
Subject: [PATCH] Align catalog parameter layout

---
 .../catalog/CatalogConfigurator.vue           | 111 +++++-------------
 1 file changed, 29 insertions(+), 82 deletions(-)

diff --git a/app/components/catalog/CatalogConfigurator.vue b/app/components/catalog/CatalogConfigurator.vue
index 48e946e..568b71b 100644
--- a/app/components/catalog/CatalogConfigurator.vue
+++ b/app/components/catalog/CatalogConfigurator.vue
@@ -232,22 +232,6 @@ function visibleFields(group: ProductGroup) {
   return parameterFields.filter((field) => getAllFieldOptions(group, field.key).length > 1);
 }
 
-function visibleFieldsByColumn(group: ProductGroup) {
-  const visibleKeys = new Set(visibleFields(group).map((field) => field.key));
-
-  const leftColumn = parameterFields.filter((field) => (
-    visibleKeys.has(field.key)
-    && ['widthMm', 'lengthM'].includes(field.key)
-  ));
-
-  const rightColumn = parameterFields.filter((field) => (
-    visibleKeys.has(field.key)
-    && ['thicknessMicron', 'quantityPerBox', 'sleeveBrand', 'colorTag', 'labelTag'].includes(field.key)
-  ));
-
-  return { leftColumn, rightColumn };
-}
-
 function requiredKeys(group: ProductGroup) {
   return visibleFields(group).map((field) => field.key);
 }
@@ -516,74 +500,37 @@ function decrementSelected(group: ProductGroup) {
               <h2 class="text-2xl font-bold text-[#163624]">{{ group.typeLabel }}</h2>
             </div>
 
-            <div class="grid gap-8 md:grid-cols-2">
-              <div class="space-y-4">
-                <div
-                  v-for="field in visibleFieldsByColumn(group).leftColumn"
-                  :key="`${group.key}-${field.key}`"
-                  class="border-b border-base-200 pb-4 last:border-b-0 last:pb-0"
-                >
-                  <p class="text-sm font-semibold text-[#163624]">{{ field.label }}</p>
+            <div class="grid content-start gap-4 md:grid-cols-2 2xl:grid-cols-3">
+              <div
+                v-for="field in visibleFields(group)"
+                :key="`${group.key}-${field.key}`"
+                class="rounded-[22px] border border-base-200 bg-[#fbfcfb] p-4"
+              >
+                <p class="text-sm font-semibold text-[#163624]">{{ field.label }}</p>
 
-                  <div class="mt-3 flex flex-wrap gap-2">
-                    <label
-                      v-for="option in getAllFieldOptions(group, field.key)"
-                      :key="`${group.key}-${field.key}-${option}`"
-                      class="btn btn-sm rounded-full text-sm normal-case shadow-none transition"
-                      :class="[
-                        getGroupState(group)[field.key] === option
-                          ? 'bg-neutral text-neutral-content'
-                          : isOptionAvailable(group, field.key, option)
-                            ? 'bg-base-100 text-base-content hover:bg-base-200'
-                            : 'bg-[#eef1f4] text-[#7b8591] hover:bg-[#e3e7eb]',
-                        'cursor-pointer',
-                      ]"
+                <div class="mt-3 flex flex-wrap gap-2">
+                  <label
+                    v-for="option in getAllFieldOptions(group, field.key)"
+                    :key="`${group.key}-${field.key}-${option}`"
+                    class="btn btn-sm rounded-full text-sm normal-case shadow-none transition"
+                    :class="[
+                      getGroupState(group)[field.key] === option
+                        ? 'bg-neutral text-neutral-content'
+                        : isOptionAvailable(group, field.key, option)
+                          ? 'bg-base-100 text-base-content hover:bg-base-200'
+                          : 'bg-[#eef1f4] text-[#7b8591] hover:bg-[#e3e7eb]',
+                      'cursor-pointer',
+                    ]"
+                  >
+                    <input
+                      type="radio"
+                      class="sr-only"
+                      :name="`${group.key}-${field.key}`"
+                      :checked="getGroupState(group)[field.key] === option"
+                      @change="updateField(group, field.key, option)"
                     >
-                      <input
-                        type="radio"
-                        class="sr-only"
-                        :name="`${group.key}-${field.key}`"
-                        :checked="getGroupState(group)[field.key] === option"
-                        @change="updateField(group, field.key, option)"
-                      >
-                      <span>{{ formatOptionLabel(field.key, option) }}</span>
-                    </label>
-                  </div>
-                </div>
-              </div>
-
-              <div class="space-y-4">
-                <div
-                  v-for="field in visibleFieldsByColumn(group).rightColumn"
-                  :key="`${group.key}-${field.key}`"
-                  class="border-b border-base-200 pb-4 last:border-b-0 last:pb-0"
-                >
-                  <p class="text-sm font-semibold text-[#163624]">{{ field.label }}</p>
-
-                  <div class="mt-3 flex flex-wrap gap-2">
-                    <label
-                      v-for="option in getAllFieldOptions(group, field.key)"
-                      :key="`${group.key}-${field.key}-${option}`"
-                      class="btn btn-sm rounded-full text-sm normal-case shadow-none transition"
-                      :class="[
-                        getGroupState(group)[field.key] === option
-                          ? 'bg-neutral text-neutral-content'
-                          : isOptionAvailable(group, field.key, option)
-                            ? 'bg-base-100 text-base-content hover:bg-base-200'
-                            : 'bg-[#eef1f4] text-[#7b8591] hover:bg-[#e3e7eb]',
-                        'cursor-pointer',
-                      ]"
-                    >
-                      <input
-                        type="radio"
-                        class="sr-only"
-                        :name="`${group.key}-${field.key}`"
-                        :checked="getGroupState(group)[field.key] === option"
-                        @change="updateField(group, field.key, option)"
-                      >
-                      <span>{{ formatOptionLabel(field.key, option) }}</span>
-                    </label>
-                  </div>
+                    <span>{{ formatOptionLabel(field.key, option) }}</span>
+                  </label>
                 </div>
               </div>
             </div>