From 702517d2062ff66b8263c4ea0e14e21c9daeaaac Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 8 Dec 2024 14:27:15 +0530
Subject: [PATCH] fix: link field overflow issue

---
 frontend/src/components/Controls/Link.vue          | 2 +-
 frontend/src/components/FieldLayout.vue            | 2 +-
 frontend/src/components/frappe-ui/Autocomplete.vue | 9 +++------
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Controls/Link.vue b/frontend/src/components/Controls/Link.vue
index 4738cbd2..c95948eb 100644
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="space-y-1.5">
+  <div class="space-y-1.5 p-[2px] -m-[2px]">
     <label class="block" :class="labelClasses" v-if="attrs.label">
       {{ __(attrs.label) }}
     </label>
diff --git a/frontend/src/components/FieldLayout.vue b/frontend/src/components/FieldLayout.vue
index 35f95ad5..e28a3436 100644
--- a/frontend/src/components/FieldLayout.vue
+++ b/frontend/src/components/FieldLayout.vue
@@ -112,7 +112,7 @@
                   </div>
                   <div class="flex gap-1" v-else-if="field.type === 'Link'">
                     <Link
-                      class="form-control flex-1"
+                      class="form-control flex-1 truncate"
                       :value="data[field.name]"
                       :doctype="field.options"
                       :filters="field.filters"
diff --git a/frontend/src/components/frappe-ui/Autocomplete.vue b/frontend/src/components/frappe-ui/Autocomplete.vue
index b4f5234f..eb0f3bd6 100644
--- a/frontend/src/components/frappe-ui/Autocomplete.vue
+++ b/frontend/src/components/frappe-ui/Autocomplete.vue
@@ -18,15 +18,12 @@
               :class="inputClasses"
               @click="() => togglePopover()"
             >
-              <div class="flex items-center">
+              <div class="flex text-base leading-5 items-center truncate">
                 <slot name="prefix" />
-                <span
-                  class="overflow-hidden text-ellipsis whitespace-nowrap text-base leading-5"
-                  v-if="selectedValue"
-                >
+                <span v-if="selectedValue" class="truncate">
                   {{ displayValue(selectedValue) }}
                 </span>
-                <span class="text-base leading-5 text-ink-gray-4" v-else>
+                <span v-else class="text-ink-gray-4 truncate">
                   {{ placeholder || '' }}
                 </span>
               </div>