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/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="text-left rtl:text-right flex flex-col gap-2">
+  <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 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