From 35a299b4d819cf862c6a1b166cf988645bb7bc84 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 10 Dec 2024 16:37:13 +0530
Subject: [PATCH] fix: do not use dynamic class for grid columns

---
 frontend/src/components/FieldLayoutEditor.vue     | 15 ++++++++++++---
 .../src/components/frappe-ui/Autocomplete.vue     |  2 +-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/FieldLayoutEditor.vue b/frontend/src/components/FieldLayoutEditor.vue
index 7d07001d..4421199f 100644
--- a/frontend/src/components/FieldLayoutEditor.vue
+++ b/frontend/src/components/FieldLayoutEditor.vue
@@ -119,9 +119,7 @@
               group="fields"
               item-key="label"
               class="grid gap-1.5"
-              :class="
-                section.columns ? 'grid-cols-' + section.columns : 'grid-cols-3'
-              "
+              :class="gridClass(section.columns)"
               handle=".cursor-grab"
             >
               <template #item="{ element: field }">
@@ -349,6 +347,17 @@ function getSectionOptions(section) {
   ]
 }
 
+function gridClass(columns) {
+  columns = columns || 3
+  let griColsMap = {
+    1: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-1',
+    2: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-2',
+    3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+    4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+  }
+  return griColsMap[columns]
+}
+
 watch(
   () => props.doctype,
   () => fields.fetch(params.value),
diff --git a/frontend/src/components/frappe-ui/Autocomplete.vue b/frontend/src/components/frappe-ui/Autocomplete.vue
index eb0f3bd6..e5842171 100644
--- a/frontend/src/components/frappe-ui/Autocomplete.vue
+++ b/frontend/src/components/frappe-ui/Autocomplete.vue
@@ -63,7 +63,7 @@
               </button>
             </div>
             <ComboboxOptions
-              class="my-1 max-h-[12rem] overflow-y-auto px-1.5"
+              class="my-1 max-h-[12rem] overflow-y-auto p-1.5 pt-0"
               static
             >
               <div