Align catalog parameter layout

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,12 +500,11 @@ 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="grid content-start gap-4 md:grid-cols-2 2xl:grid-cols-3">
-              <div class="space-y-4">
               <div
-                  v-for="field in visibleFieldsByColumn(group).leftColumn"
+                v-for="field in visibleFields(group)"
                 :key="`${group.key}-${field.key}`"
-                  class="border-b border-base-200 pb-4 last:border-b-0 last:pb-0"
+                class="rounded-[22px] border border-base-200 bg-[#fbfcfb] p-4"
               >
                 <p class="text-sm font-semibold text-[#163624]">{{ field.label }}</p>
 
@@ -551,42 +534,6 @@ function decrementSelected(group: ProductGroup) {
                 </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>
-                </div>
-              </div>
-            </div>
           </div>
 
           <aside class="p-4 md:p-5 xl:col-span-1">