From 1c54f2facad40e184273a6f5efa2e048cb4971eb Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 30 Oct 2024 13:12:05 +0530
Subject: [PATCH] fix: make section fields label & field width 35-65%

---
 frontend/src/components/SectionFields.vue | 294 +++++++++++-----------
 1 file changed, 148 insertions(+), 146 deletions(-)

diff --git a/frontend/src/components/SectionFields.vue b/frontend/src/components/SectionFields.vue
index d8a26f5a..d612ec8f 100644
--- a/frontend/src/components/SectionFields.vue
+++ b/frontend/src/components/SectionFields.vue
@@ -10,166 +10,168 @@
       class="section-field flex items-center gap-2 px-3 leading-5 first:mt-3"
     >
       <Tooltip :text="__(field.label)" :hoverDelay="1">
-        <div class="sm:w-[106px] w-36 shrink-0 truncate text-sm text-gray-600">
+        <div class="w-[35%] min-w-20 shrink-0 truncate text-sm text-gray-600">
           <span>{{ __(field.label) }}</span>
           <span class="text-red-500">{{ field.reqd ? ' *' : '' }}</span>
         </div>
       </Tooltip>
-      <div
-        class="grid min-h-[28px] flex-1 items-center overflow-hidden text-base"
-      >
+      <div class="flex items-center justify-between w-[65%]">
         <div
-          v-if="
-            field.read_only && !['checkbox', 'dropdown'].includes(field.type)
-          "
-          class="flex h-7 cursor-pointer items-center px-2 py-1 text-gray-600"
+          class="grid min-h-[28px] flex-1 items-center overflow-hidden text-base"
         >
-          <Tooltip :text="__(field.tooltip)">
-            <div>{{ data[field.name] }}</div>
-          </Tooltip>
-        </div>
-        <div v-else-if="field.type === 'dropdown'">
-          <NestedPopover>
-            <template #target="{ open }">
-              <Button
-                :label="data[field.name]"
-                class="dropdown-button flex w-full items-center justify-between rounded border border-gray-100 bg-gray-100 px-2 py-1.5 text-base text-gray-800 placeholder-gray-500 transition-colors hover:border-gray-200 hover:bg-gray-200 focus:border-gray-500 focus:bg-white focus:shadow-sm focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400"
-              >
-                <div v-if="data[field.name]" class="truncate">
-                  {{ data[field.name] }}
-                </div>
-                <div v-else class="text-base leading-5 text-gray-500">
-                  {{ field.placeholder }}
-                </div>
-                <template #suffix>
-                  <FeatherIcon
-                    :name="open ? 'chevron-up' : 'chevron-down'"
-                    class="h-4 text-gray-600"
-                  />
-                </template>
-              </Button>
-            </template>
-            <template #body>
-              <div
-                class="my-2 space-y-1.5 divide-y rounded-lg border border-gray-100 bg-white p-1.5 shadow-xl"
-              >
-                <div>
-                  <DropdownItem
-                    v-if="field.options?.length"
-                    v-for="option in field.options"
-                    :key="option.name"
-                    :option="option"
-                  />
-                  <div v-else>
-                    <div class="p-1.5 px-7 text-base text-gray-500">
-                      {{ __('No {0} Available', [field.label]) }}
+          <div
+            v-if="
+              field.read_only && !['checkbox', 'dropdown'].includes(field.type)
+            "
+            class="flex h-7 cursor-pointer items-center px-2 py-1 text-gray-600"
+          >
+            <Tooltip :text="__(field.tooltip)">
+              <div>{{ data[field.name] }}</div>
+            </Tooltip>
+          </div>
+          <div v-else-if="field.type === 'dropdown'">
+            <NestedPopover>
+              <template #target="{ open }">
+                <Button
+                  :label="data[field.name]"
+                  class="dropdown-button flex w-full items-center justify-between rounded border border-gray-100 bg-gray-100 px-2 py-1.5 text-base text-gray-800 placeholder-gray-500 transition-colors hover:border-gray-200 hover:bg-gray-200 focus:border-gray-500 focus:bg-white focus:shadow-sm focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400"
+                >
+                  <div v-if="data[field.name]" class="truncate">
+                    {{ data[field.name] }}
+                  </div>
+                  <div v-else class="text-base leading-5 text-gray-500">
+                    {{ field.placeholder }}
+                  </div>
+                  <template #suffix>
+                    <FeatherIcon
+                      :name="open ? 'chevron-up' : 'chevron-down'"
+                      class="h-4 text-gray-600"
+                    />
+                  </template>
+                </Button>
+              </template>
+              <template #body>
+                <div
+                  class="my-2 space-y-1.5 divide-y rounded-lg border border-gray-100 bg-white p-1.5 shadow-xl"
+                >
+                  <div>
+                    <DropdownItem
+                      v-if="field.options?.length"
+                      v-for="option in field.options"
+                      :key="option.name"
+                      :option="option"
+                    />
+                    <div v-else>
+                      <div class="p-1.5 px-7 text-base text-gray-500">
+                        {{ __('No {0} Available', [field.label]) }}
+                      </div>
                     </div>
                   </div>
+                  <div class="pt-1.5">
+                    <Button
+                      variant="ghost"
+                      class="w-full !justify-start"
+                      :label="__('Create New')"
+                      @click="field.create()"
+                    >
+                      <template #prefix>
+                        <FeatherIcon name="plus" class="h-4" />
+                      </template>
+                    </Button>
+                  </div>
                 </div>
-                <div class="pt-1.5">
-                  <Button
-                    variant="ghost"
-                    class="w-full !justify-start"
-                    :label="__('Create New')"
-                    @click="field.create()"
-                  >
-                    <template #prefix>
-                      <FeatherIcon name="plus" class="h-4" />
-                    </template>
-                  </Button>
-                </div>
-              </div>
+              </template>
+            </NestedPopover>
+          </div>
+          <FormControl
+            v-else-if="field.type == 'checkbox'"
+            class="form-control"
+            :type="field.type"
+            v-model="data[field.name]"
+            @change.stop="emit('update', field.name, $event.target.checked)"
+            :disabled="Boolean(field.read_only)"
+          />
+          <FormControl
+            v-else-if="
+              ['email', 'number', 'date', 'password', 'textarea'].includes(
+                field.type,
+              )
+            "
+            class="form-control"
+            :class="{
+              '[&_input]:text-gray-500':
+                field.type === 'date' && !data[field.name],
+            }"
+            :type="field.type"
+            :value="data[field.name]"
+            :placeholder="field.placeholder"
+            :debounce="500"
+            @change.stop="emit('update', field.name, $event.target.value)"
+          />
+          <FormControl
+            v-else-if="field.type === 'select'"
+            class="form-control cursor-pointer [&_select]:cursor-pointer"
+            type="select"
+            v-model="data[field.name]"
+            :options="field.options"
+            :placeholder="field.placeholder"
+            @change.stop="emit('update', field.name, $event.target.value)"
+          />
+          <Link
+            v-else-if="['lead_owner', 'deal_owner'].includes(field.name)"
+            class="form-control"
+            :value="data[field.name] && getUser(data[field.name]).full_name"
+            doctype="User"
+            :filters="field.filters"
+            @change="(data) => emit('update', field.name, data)"
+            :placeholder="'Select' + ' ' + field.label + '...'"
+            :hideMe="true"
+          >
+            <template v-if="data[field.name]" #prefix>
+              <UserAvatar class="mr-1.5" :user="data[field.name]" size="sm" />
             </template>
-          </NestedPopover>
+            <template #item-prefix="{ option }">
+              <UserAvatar class="mr-1.5" :user="option.value" size="sm" />
+            </template>
+            <template #item-label="{ option }">
+              <Tooltip :text="option.value">
+                <div class="cursor-pointer">
+                  {{ getUser(option.value).full_name }}
+                </div>
+              </Tooltip>
+            </template>
+          </Link>
+          <Link
+            v-else-if="field.type === 'link'"
+            class="form-control select-text"
+            :value="data[field.name]"
+            :doctype="field.doctype"
+            :filters="field.filters"
+            :placeholder="field.placeholder"
+            @change="(data) => emit('update', field.name, data)"
+            :onCreate="field.create"
+          />
+          <FormControl
+            v-else
+            class="form-control"
+            type="text"
+            :value="data[field.name]"
+            :placeholder="field.placeholder"
+            :debounce="500"
+            @change.stop="emit('update', field.name, $event.target.value)"
+          />
         </div>
-        <FormControl
-          v-else-if="field.type == 'checkbox'"
-          class="form-control"
-          :type="field.type"
-          v-model="data[field.name]"
-          @change.stop="emit('update', field.name, $event.target.checked)"
-          :disabled="Boolean(field.read_only)"
+        <ArrowUpRightIcon
+          v-if="field.type === 'link' && field.link && data[field.name]"
+          class="h-4 w-4 shrink-0 cursor-pointer text-gray-600 hover:text-gray-800"
+          @click="field.link(data[field.name])"
         />
-        <FormControl
-          v-else-if="
-            ['email', 'number', 'date', 'password', 'textarea'].includes(
-              field.type,
-            )
-          "
-          class="form-control"
-          :class="{
-            '[&_input]:text-gray-500':
-              field.type === 'date' && !data[field.name],
-          }"
-          :type="field.type"
-          :value="data[field.name]"
-          :placeholder="field.placeholder"
-          :debounce="500"
-          @change.stop="emit('update', field.name, $event.target.value)"
-        />
-        <FormControl
-          v-else-if="field.type === 'select'"
-          class="form-control cursor-pointer [&_select]:cursor-pointer"
-          type="select"
-          v-model="data[field.name]"
-          :options="field.options"
-          :placeholder="field.placeholder"
-          @change.stop="emit('update', field.name, $event.target.value)"
-        />
-        <Link
-          v-else-if="['lead_owner', 'deal_owner'].includes(field.name)"
-          class="form-control"
-          :value="data[field.name] && getUser(data[field.name]).full_name"
-          doctype="User"
-          :filters="field.filters"
-          @change="(data) => emit('update', field.name, data)"
-          :placeholder="'Select' + ' ' + field.label + '...'"
-          :hideMe="true"
-        >
-          <template v-if="data[field.name]" #prefix>
-            <UserAvatar class="mr-1.5" :user="data[field.name]" size="sm" />
-          </template>
-          <template #item-prefix="{ option }">
-            <UserAvatar class="mr-1.5" :user="option.value" size="sm" />
-          </template>
-          <template #item-label="{ option }">
-            <Tooltip :text="option.value">
-              <div class="cursor-pointer">
-                {{ getUser(option.value).full_name }}
-              </div>
-            </Tooltip>
-          </template>
-        </Link>
-        <Link
-          v-else-if="field.type === 'link'"
-          class="form-control select-text"
-          :value="data[field.name]"
-          :doctype="field.doctype"
-          :filters="field.filters"
-          :placeholder="field.placeholder"
-          @change="(data) => emit('update', field.name, data)"
-          :onCreate="field.create"
-        />
-        <FormControl
-          v-else
-          class="form-control"
-          type="text"
-          :value="data[field.name]"
-          :placeholder="field.placeholder"
-          :debounce="500"
-          @change.stop="emit('update', field.name, $event.target.value)"
+        <EditIcon
+          v-if="field.type === 'link' && field.edit && data[field.name]"
+          class="size-3.5 shrink-0 cursor-pointer text-gray-600 hover:text-gray-800"
+          @click="field.edit(data[field.name])"
         />
       </div>
-      <ArrowUpRightIcon
-        v-if="field.type === 'link' && field.link && data[field.name]"
-        class="h-4 w-4 shrink-0 cursor-pointer text-gray-600 hover:text-gray-800"
-        @click="field.link(data[field.name])"
-      />
-      <EditIcon
-        v-if="field.type === 'link' && field.edit && data[field.name]"
-        class="size-3.5 shrink-0 cursor-pointer text-gray-600 hover:text-gray-800"
-        @click="field.edit(data[field.name])"
-      />
     </div>
   </FadedScrollableDiv>
 </template>