From 3a021569d4b631eb1f0803a19b5a7bdd2ec9b8c9 Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Thu, 14 Mar 2024 16:40:49 +0530
Subject: [PATCH] fix: responsive issues

---
 .../dashboard/inbox/components/InboxCard.vue  |   6 +-
 .../inbox/components/InboxCardInfo.vue        | 101 +++++++++---------
 2 files changed, 52 insertions(+), 55 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
index 3b24de2c6..dd68db2bc 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
@@ -51,7 +51,7 @@
           {{ snoozedDisplayText }}
         </span>
       </div>
-      <div v-else class="flex items-center flex-row justify-start gap-2">
+      <div v-else class="flex items-center flex-row justify-start gap-2 w-3/4">
         <inbox-card-info
           :inbox="inbox"
           :conversation-id="primaryActor.id"
@@ -60,7 +60,7 @@
         />
         <div
           v-show="notificationTypes"
-          class="flex flex-row items-center gap-0.5"
+          class="flex flex-row items-center gap-0.5 w-fit"
         >
           <fluent-icon
             :icon="notificationTypeIcon"
@@ -75,7 +75,7 @@
           </span>
         </div>
       </div>
-      <div class="flex items-center gap-2">
+      <div class="flex items-center justify-end gap-2 w-1/4">
         <PriorityIcon :priority="primaryActor.priority" />
         <StatusIcon :status="primaryActor.status" />
         <span
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCardInfo.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCardInfo.vue
index 786ebd2da..d46de181b 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCardInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCardInfo.vue
@@ -1,59 +1,56 @@
 <template>
-  <div class="w-auto bg-none">
+  <div
+    class="flex items-center w-auto justify-start rounded-[4px] border border-slate-100 dark:border-slate-700/50 divide-x divide-slate-100 dark:divide-slate-700/50 bg-none overflow-hidden"
+  >
+    <!-- Inbox icon -->
     <div
-      class="flex items-center w-full justify-start rounded-[4px] border border-slate-100 dark:border-slate-700/50 divide-x divide-slate-100 dark:divide-slate-700/50 bg-none"
+      v-if="inbox"
+      ref="inboxIcon"
+      v-tooltip.right="inbox.name"
+      class="flex items-center gap-0.5 py-0.5 px-1.5"
     >
-      <!-- Inbox icon -->
-      <div
-        v-if="inbox"
-        ref="inboxIcon"
-        v-tooltip.right="inbox.name"
-        class="flex items-center gap-0.5 py-0.5 px-1.5"
-      >
-        <fluent-icon
-          class="flex-shrink-0 text-slate-700 dark:text-slate-200"
-          :icon="inboxIcon"
-          type="outline"
-          size="14"
-        />
-      </div>
-      <!-- Conversation ID -->
-      <span
-        class="flex items-center py-0.5 px-1.5 font-medium text-slate-600 dark:text-slate-200 text-xs"
-      >
-        {{ conversationId }}
-      </span>
-      <!-- Labels display logic -->
-      <div
-        class="flex flex-row w-full divide-x divide-slate-100 dark:divide-slate-700/50"
-      >
-        <div
-          v-for="(label, index) in activeLabels"
-          v-show="index < visibleLabels"
-          :key="label.id"
-          class="flex items-center justify-start gap-1 w-full py-0.5 px-1.5"
-        >
-          <span
-            v-if="label.title"
-            :style="{ background: label.color }"
-            class="flex-shrink-0 w-2 h-2 rounded-sm"
-          />
-          <span
-            class="text-xs font-medium truncate text-slate-700 dark:text-slate-200"
-          >
-            {{ label.title }}
-          </span>
-        </div>
-        <!-- Label count display logic -->
-        <span
-          v-if="activeLabels.length > visibleLabels"
-          :title="hiddenLabelsTitle"
-          class="flex items-center py-0.5 px-1.5 font-medium text-slate-700 dark:text-slate-200 text-xs"
-        >
-          +{{ activeLabels.length - visibleLabels }}
-        </span>
-      </div>
+      <fluent-icon
+        class="flex-shrink-0 text-slate-700 dark:text-slate-200"
+        :icon="inboxIcon"
+        type="outline"
+        size="14"
+      />
     </div>
+
+    <!-- Conversation ID -->
+    <span
+      class="flex items-center py-0.5 px-1.5 font-medium text-slate-600 dark:text-slate-200 text-xs"
+    >
+      {{ conversationId }}
+    </span>
+
+    <!-- Labels display logic -->
+    <div
+      v-for="(label, index) in activeLabels"
+      v-show="index < visibleLabels"
+      :key="label.id"
+      class="flex items-center truncate justify-start gap-1 py-0.5 px-1.5"
+    >
+      <span
+        v-if="label.title"
+        :style="{ background: label.color }"
+        class="flex-shrink-0 w-2 h-2 rounded-sm"
+      />
+      <span
+        class="text-xs font-medium truncate text-slate-700 dark:text-slate-200"
+      >
+        {{ label.title }}
+      </span>
+    </div>
+
+    <!-- Label count display logic -->
+    <span
+      v-if="activeLabels.length > visibleLabels"
+      :title="hiddenLabelsTitle"
+      class="flex items-center py-0.5 px-1.5 font-medium text-slate-700 dark:text-slate-200 text-xs"
+    >
+      +{{ activeLabels.length - visibleLabels }}
+    </span>
   </div>
 </template>