chore: Clean up

app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue

@@ -77,7 +77,7 @@ const handleInputUpdate = async () => {
 
 <template>
   <div
-    class="flex items-center w-full gap-2"
+    class="flex items-center w-full min-w-0 gap-2"
     :class="{
       'justify-start': isEditingView,
       'justify-end': !isEditingView,
@@ -85,11 +85,11 @@ const handleInputUpdate = async () => {
   >
     <span
       v-if="!isEditingValue"
-      class="text-sm"
+      class="min-w-0 text-sm"
       :class="{
         'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
           !isEditingView,
-        'text-n-slate-12': isEditingView,
+        'text-n-slate-12 truncate flex-1': isEditingView,
       }"
       @click="toggleEditValue(!isEditingView)"
     >

app/javascript/dashboard/components-next/CustomAttributes/ListAttribute.vue

@@ -42,7 +42,7 @@ const handleAttributeAction = async action => {
 
 <template>
   <div
-    class="flex items-center w-full gap-2"
+    class="flex items-center w-full min-w-0 gap-2"
     :class="{
       'justify-start': isEditingView,
       'justify-end': !isEditingView,
@@ -53,11 +53,11 @@ const handleAttributeAction = async action => {
       class="relative flex items-center"
     >
       <span
-        class="text-sm"
+        class="min-w-0 text-sm"
         :class="{
           'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
             !isEditingView,
-          'text-n-slate-12': isEditingView,
+          'text-n-slate-12 truncate flex-1': isEditingView,
         }"
         @click="toggleAttributeListDropdown(!props.isEditingView)"
       >

app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue

@@ -115,7 +115,7 @@ const handleInputUpdate = async () => {
 
 <template>
   <div
-    class="flex items-center w-full gap-2"
+    class="flex items-center w-full min-w-0 gap-2"
     :class="{
       'justify-start': isEditingView,
       'justify-end': !isEditingView,
@@ -123,17 +123,33 @@ const handleInputUpdate = async () => {
   >
     <span
       v-if="!isEditingValue"
-      class="text-sm"
+      class="min-w-0 text-sm"
       :class="{
         'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
           !isEditingView,
-        'text-n-slate-12': isEditingView,
+        'text-n-slate-12 truncate flex-1':
+          isEditingView && !isAttributeTypeLink,
+        'truncate flex-1 hover:text-n-brand text-n-blue-text':
+          isEditingView && isAttributeTypeLink,
       }"
       @click="toggleEditValue(!isEditingView)"
     >
-      {{
-        attribute.value || t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.TRIGGER.INPUT')
-      }}
+      <a
+        v-if="isAttributeTypeLink && attribute.value"
+        :href="attribute.value"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="hover:underline"
+        @click.stop
+      >
+        {{ attribute.value }}
+      </a>
+      <template v-else>
+        {{
+          attribute.value ||
+          t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.TRIGGER.INPUT')
+        }}
+      </template>
     </span>
 
     <div