fix: UI breakages (#9040)

- Fixes overflow of contact details in the contact side panel.
- Fixes line height issue in article header.
- Fixes overflow of category names in the article list.
- Fixes typing indicator alignment issues

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -222,20 +222,6 @@
   @apply flex relative flex-col;
 }
 
-.typing-indicator-wrap {
-  @apply items-center flex h-0 absolute w-full -top-8;
-
-  .typing-indicator {
-    @include elegant-card;
-    @include round-corner;
-    @apply py-2 pr-4 pl-5 bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100 text-xs font-semibold my-2.5 mx-auto;
-
-    .gif {
-      @apply ml-2 w-6;
-    }
-  }
-}
-
 .left .bubble .text-content {
   h1,
   h2,

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

@@ -76,11 +76,16 @@
       class="conversation-footer"
       :class="{ 'modal-mask': isPopoutReplyBox }"
     >
-      <div v-if="isAnyoneTyping" class="typing-indicator-wrap">
+      <div
-        <div class="typing-indicator">
+        v-if="isAnyoneTyping"
+        class="items-center flex h-0 absolute w-full -top-7"
+      >
+        <div
+          class="flex py-2 pr-4 pl-5 shadow-md rounded-full bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100 text-xs font-semibold my-2.5 mx-auto"
+        >
           {{ typingUserNames }}
           <img
-            class="gif"
+            class="ltr:ml-2 rtl:mr-2 w-6"
             src="~dashboard/assets/images/typing.gif"
             alt="Someone is typing"
           />

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

@@ -1,6 +1,6 @@
 <template>
-  <div class="relative items-center p-4 bg-white dark:bg-slate-900">
+  <div class="relative items-center p-4 bg-white dark:bg-slate-900 w-full">
-    <div class="text-left rtl:text-right flex flex-col gap-2">
+    <div class="text-left rtl:text-right flex flex-col gap-2 w-full">
       <div class="flex justify-between flex-row">
         <thumbnail
           v-if="showAvatar"
@@ -55,7 +55,7 @@
         <p v-if="additionalAttributes.description" class="break-words mb-0.5">
           {{ additionalAttributes.description }}
         </p>
-        <div class="flex flex-col gap-2 items-start">
+        <div class="flex flex-col gap-2 items-start w-full">
           <contact-info-row
             :href="contact.email ? `mailto:${contact.email}` : ''"
             :value="contact.email"

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="ltr:-ml-1 rtl:-mr-1 h-5">
+  <div class="ltr:-ml-1 rtl:-mr-1 h-5 w-full">
     <a
       v-if="href"
       :href="href"
@@ -9,7 +9,7 @@
         :icon="icon"
         :emoji="emoji"
         icon-size="14"
-        class="ltr:ml-1 rtl:mr-1"
+        class="ltr:ml-1 rtl:mr-1 flex-shrink-0"
       />
       <span
         v-if="value"
@@ -42,7 +42,7 @@
         :icon="icon"
         :emoji="emoji"
         icon-size="14"
-        class="ltr:ml-1 rtl:mr-1"
+        class="ltr:ml-1 rtl:mr-1 flex-shrink-0"
       />
       <span
         v-if="value"

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue

@@ -85,7 +85,7 @@ export default {
 }
 
 .article-heading {
-  @apply text-[2.5rem] font-semibold w-full text-slate-900 dark:text-slate-75 p-4 hover:bg-slate-25 dark:hover:bg-slate-800 hover:rounded-md resize-none min-h-[4rem] max-h-[40rem] h-auto mb-2 border-0 border-solid border-transparent dark:border-transparent;
+  @apply text-[2.5rem] font-semibold leading-normal w-full text-slate-900 dark:text-slate-75 p-4 hover:bg-slate-25 dark:hover:bg-slate-800 hover:rounded-md resize-none min-h-[4rem] max-h-[40rem] h-auto mb-2 border-0 border-solid border-transparent dark:border-transparent;
 }
 
 .article-content {

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue

@@ -40,7 +40,7 @@
     </span>
     <span class="article-column article-category">
       <router-link
-        class="text-sm button clear link secondary"
+        class="text-sm button clear link secondary min-w-0 max-w-full"
         :to="getCategoryRoute(category.slug)"
       >
         <span