fix: Long names hide the resolve button (#8083)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -3,10 +3,10 @@
     class="bg-white dark:bg-slate-900 flex justify-between items-center py-2 px-4 border-b border-slate-50 dark:border-slate-800/50 flex-col md:flex-row"
   >
     <div
-      class="flex-1 w-100 flex flex-col md:flex-row items-center justify-center"
+      class="flex-1 w-full min-w-0 flex flex-col md:flex-row items-center justify-center"
     >
       <div
-        class="flex justify-center items-center mr-4 rtl:mr-0 rtl:ml-4 min-w-0"
+        class="flex justify-start items-center mr-4 rtl:mr-0 rtl:ml-4 min-w-0 w-[inherit]"
       >
         <back-button
           v-if="showBackButton"
@@ -19,26 +19,31 @@
           :username="currentContact.name"
           :status="currentContact.availability_status"
         />
-        <div class="items-start flex flex-col ml-2 rtl:ml-0 rtl:mr-2 min-w-0">
-          <woot-button
-            variant="link"
-            color-scheme="secondary"
-            class="overflow-hidden whitespace-nowrap text-ellipsis"
-            @click.prevent="$emit('contact-panel-toggle')"
-          >
-            <h3
-              class="text-base inline-block leading-tight capitalize m-0 p-0 text-ellipsis overflow-hidden whitespace-nowrap text-slate-900 dark:text-slate-100"
+        <div
+          class="items-start flex flex-col ml-2 rtl:ml-0 rtl:mr-2 min-w-0 w-[inherit] overflow-hidden"
+        >
+          <div class="flex items-center flex-row gap-1 m-0 p-0 w-[inherit]">
+            <woot-button
+              variant="link"
+              color-scheme="secondary"
+              class="[&>span]:overflow-hidden [&>span]:whitespace-nowrap [&>span]:text-ellipsis min-w-0"
+              @click.prevent="$emit('contact-panel-toggle')"
             >
-              <span>{{ currentContact.name }}</span>
-              <fluent-icon
-                v-if="!isHMACVerified"
-                v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
-                size="14"
-                class="text-yellow-600 dark:text-yellow-500 my-0 mx-0.5"
-                icon="warning"
-              />
-            </h3>
-          </woot-button>
+              <span
+                class="text-base leading-tight text-slate-900 dark:text-slate-100"
+              >
+                {{ currentContact.name }}
+              </span>
+            </woot-button>
+            <fluent-icon
+              v-if="!isHMACVerified"
+              v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
+              size="14"
+              class="text-yellow-600 dark:text-yellow-500 my-0 mx-0 min-w-[14px]"
+              icon="warning"
+            />
+          </div>
+
           <div
             class="conversation--header--actions items-center flex text-xs gap-2 text-ellipsis overflow-hidden whitespace-nowrap"
           >

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -12,7 +12,7 @@
         variant="smooth"
         size="tiny"
         color-scheme="secondary"
-        class="rounded-bl-calc rtl:rotate-180 rounded-tl-calc fixed top-[6.25rem] z-10 bg-white dark:bg-slate-700 border-slate-50 dark:border-slate-600 border-solid border border-r-0 box-border"
+        class="rounded-bl-calc rtl:rotate-180 rounded-tl-calc fixed top-[9.5rem] md:top-[6.25rem] z-10 bg-white dark:bg-slate-700 border-slate-50 dark:border-slate-600 border-solid border border-r-0 box-border"
         :icon="isRightOrLeftIcon"
         @click="onToggleContactPanel"
       />

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -18,36 +18,38 @@
       </div>
 
       <div class="mt-2 w-full">
-        <div v-if="showAvatar" class="flex items-center mb-2 gap-1">
+        <div v-if="showAvatar" class="flex items-center mb-2 gap-1.5">
           <h3
             class="text-base text-slate-800 dark:text-slate-100 capitalize whitespace-normal my-0"
           >
             {{ contact.name }}
           </h3>
-          <fluent-icon
-            v-if="contact.created_at"
-            v-tooltip="
-              `${$t('CONTACT_PANEL.CREATED_AT_LABEL')} ${dynamicTime(
-                contact.created_at
-              )}`
-            "
-            icon="info"
-            size="14"
-            class="mt-0.5"
-          />
-          <a
-            :href="contactProfileLink"
-            class="fs-default"
-            target="_blank"
-            rel="noopener nofollow noreferrer"
-          >
-            <woot-button
-              size="tiny"
-              icon="open"
-              variant="clear"
-              color-scheme="secondary"
+          <div class="flex flex-row items-start gap-1">
+            <fluent-icon
+              v-if="contact.created_at"
+              v-tooltip.left="
+                `${$t('CONTACT_PANEL.CREATED_AT_LABEL')} ${dynamicTime(
+                  contact.created_at
+                )}`
+              "
+              icon="info"
+              size="14"
+              class="mt-0.5"
             />
-          </a>
+            <a
+              :href="contactProfileLink"
+              class="fs-default"
+              target="_blank"
+              rel="noopener nofollow noreferrer"
+            >
+              <woot-button
+                size="tiny"
+                icon="open"
+                variant="clear"
+                color-scheme="secondary"
+              />
+            </a>
+          </div>
         </div>
 
         <p v-if="additionalAttributes.description" class="break-words">