From 1222cdd7d7dcafda9bd8330542cbdf559c2e4f58 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 5 Dec 2024 17:59:36 +0530
Subject: [PATCH] fix: add padding with border is allowTabs is set

---
 frontend/src/components/DocFields.vue |  7 ++++++-
 frontend/src/components/Fields.vue    | 13 +++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/DocFields.vue b/frontend/src/components/DocFields.vue
index dda99bb3..d3427234 100644
--- a/frontend/src/components/DocFields.vue
+++ b/frontend/src/components/DocFields.vue
@@ -35,7 +35,12 @@
     v-else
     class="flex flex-col gap-3 border border-outline-gray-1 rounded-lg"
   >
-    <Fields v-if="sections.data" :sections="sections.data" :data="data.doc" />
+    <Fields
+      v-if="sections.data"
+      :sections="sections.data"
+      :data="data.doc"
+      :allowTabs="true"
+    />
   </div>
   <DataFieldsModal
     v-if="showDataFieldsModal"
diff --git a/frontend/src/components/Fields.vue b/frontend/src/components/Fields.vue
index ca297936..03cd73f7 100644
--- a/frontend/src/components/Fields.vue
+++ b/frontend/src/components/Fields.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col my-4 sm:my-6">
+  <div class="flex flex-col" :class="{ 'my-4 sm:my-6': allowTabs }">
     <div
       v-for="(section, i) in sections"
       :key="section.label"
@@ -10,15 +10,16 @@
         class="h-px w-full border-t my-5"
       />
       <Section
-        class="text-lg font-medium px-3 sm:px-5"
+        class="text-lg font-medium"
+        :class="{ 'px-3 sm:px-5': allowTabs }"
         :label="section.label"
         :hideLabel="section.hideLabel"
         :opened="section.opened"
         collapseIconPosition="right"
       >
         <div
-          class="grid gap-4 mt-6 px-3 sm:px-5"
-          :class="gridClass(section.columns)"
+          class="grid gap-4 mt-6"
+          :class="[gridClass(section.columns), { 'px-3 sm:px-5': allowTabs }]"
         >
           <div v-for="field in section.fields" :key="field.name">
             <div
@@ -191,6 +192,10 @@ const { getUser } = usersStore()
 const props = defineProps({
   sections: Array,
   data: Object,
+  allowTabs: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 function gridClass(columns) {