style(catalog): split configurator fields into two columns

app/components/catalog/CatalogConfigurator.vue

@@ -199,6 +199,22 @@ 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'].includes(field.key)
+  ));
+
+  return { leftColumn, rightColumn };
+}
+
 function requiredKeys(group: ProductGroup) {
   return visibleFields(group).map((field) => field.key);
 }
@@ -422,9 +438,10 @@ 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 visibleFields(group)"
+                  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"
                 >
@@ -457,6 +474,43 @@ 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 border text-sm normal-case shadow-none transition"
+                      :class="[
+                        getGroupState(group)[field.key] === option
+                          ? 'border-neutral bg-neutral text-neutral-content'
+                          : 'border-base-300 bg-base-100 text-base-content hover:border-neutral/30 hover:bg-base-200',
+                        !isOptionAvailable(group, field.key, option)
+                          ? 'pointer-events-none opacity-35'
+                          : 'cursor-pointer',
+                      ]"
+                    >
+                      <input
+                        type="radio"
+                        class="sr-only"
+                        :name="`${group.key}-${field.key}`"
+                        :checked="getGroupState(group)[field.key] === option"
+                        :disabled="!isOptionAvailable(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">