From 3508228967fc047e905c5e0299d203c068c15639 Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Wed, 10 Dec 2025 15:45:25 +0530
Subject: [PATCH] chore: Minor fix

---
 .../changelog-card/StackedChangelogCard.vue   |  2 +-
 .../components-next/sidebar/Sidebar.vue       |  2 +-
 .../components-next/tabbar/TabBar.vue         |  2 +-
 .../widgets/conversation/ConversationBox.vue  |  2 +-
 .../conversation/ConversationHeader.vue       | 46 +++++++++++++------
 5 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/app/javascript/dashboard/components-next/changelog-card/StackedChangelogCard.vue b/app/javascript/dashboard/components-next/changelog-card/StackedChangelogCard.vue
index 8b2d430a4..7eb37744d 100644
--- a/app/javascript/dashboard/components-next/changelog-card/StackedChangelogCard.vue
+++ b/app/javascript/dashboard/components-next/changelog-card/StackedChangelogCard.vue
@@ -34,7 +34,7 @@ const handleImgClick = () => {
 <template>
   <div
     data-testid="changelog-card"
-    class="flex flex-col justify-between p-3 w-full rounded-lg border shadow-sm transition-all duration-200 border-n-weak bg-n-background text-n-slate-12"
+    class="flex flex-col justify-between p-3 w-full rounded-lg border shadow-sm transition-all duration-200 border-n-weak bg-n-surface-2 text-n-slate-12"
     :class="{
       'animate-fade-out pointer-events-none': isDismissing,
       'hover:shadow': isActive,
diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index 6706cf82a..2a383534e 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -649,7 +649,7 @@ const menuItems = computed(() => {
       class="flex flex-col flex-shrink-0 relative gap-1 justify-between items-center"
     >
       <div
-        class="pointer-events-none absolute inset-x-0 -top-[31px] h-8 bg-gradient-to-t from-n-background to-transparent"
+        class="pointer-events-none absolute inset-x-0 -top-[1.938rem] h-8 bg-gradient-to-t from-n-background to-transparent"
       />
       <SidebarChangelogCard
         v-if="isOnChatwootCloud && !isACustomBrandedInstance"
diff --git a/app/javascript/dashboard/components-next/tabbar/TabBar.vue b/app/javascript/dashboard/components-next/tabbar/TabBar.vue
index 1b08b838c..cce6e792a 100644
--- a/app/javascript/dashboard/components-next/tabbar/TabBar.vue
+++ b/app/javascript/dashboard/components-next/tabbar/TabBar.vue
@@ -80,7 +80,7 @@ const showDivider = index => {
         class="relative z-10 px-4 truncate py-1.5 text-sm border-0 outline-1 outline-transparent rounded-lg transition-all duration-200 ease-out hover:text-n-brand active:scale-[1.02]"
         :class="[
           activeTab === index
-            ? 'text-n-blue-text scale-100'
+            ? 'text-n-blue-11 scale-100'
             : 'text-n-slate-10 scale-[0.98]',
         ]"
         @click="selectTab(index)"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index c8a5b3e0b..e36c64060 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -97,7 +97,7 @@ onMounted(() => {
     <woot-tabs
       v-if="dashboardApps.length && currentChat.id"
       :index="activeIndex"
-      class="[&>ul]:px-5 h-10"
+      class="h-10"
       @change="onDashboardAppTabChange"
     >
       <woot-tabs-item
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index 1ed788d09..036840fb0 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -45,17 +45,21 @@ const isSidePanelOpen = computed(
     false
 );
 
-const breakpoint = computed(() => {
-  const base = props.isOnExpandedView ? 'md' : 'lg';
-  const open = props.isOnExpandedView ? 'lg' : 'xl';
-  return isSidePanelOpen.value ? open : base;
-});
-
-const responsiveClasses = computed(() => ({
-  header: `${breakpoint.value}:flex-row ${breakpoint.value}:items-center`,
-  left: `${breakpoint.value}:flex-1 ${breakpoint.value}:basis-0`,
-  right: `${breakpoint.value}:flex-1 ${breakpoint.value}:basis-0 ${breakpoint.value}:justify-end`,
-}));
+// Responsive layout breakpoints based on view state
+// Expanded view + panel open = lg, Expanded view + panel closed = md
+// Normal view + panel open = xl, Normal view + panel closed = lg
+const isExpandedWithPanel = computed(
+  () => props.isOnExpandedView && isSidePanelOpen.value
+);
+const isExpandedWithoutPanel = computed(
+  () => props.isOnExpandedView && !isSidePanelOpen.value
+);
+const isNormalWithPanel = computed(
+  () => !props.isOnExpandedView && isSidePanelOpen.value
+);
+const isNormalWithoutPanel = computed(
+  () => !props.isOnExpandedView && !isSidePanelOpen.value
+);
 
 const currentChat = computed(() => store.getters.getSelectedChat);
 const accountId = computed(() => store.getters.getCurrentAccountId);
@@ -112,11 +116,20 @@ const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
   <div
     ref="conversationHeader"
     class="flex flex-col items-start gap-x-6 gap-y-2 w-full min-w-0 pt-3 pb-2 ltr:pl-4 rtl:pr-4 ltr:pr-1 rtl:pl-1"
-    :class="responsiveClasses.header"
+    :class="{
+      'md:flex-row md:items-center': isExpandedWithoutPanel,
+      'lg:flex-row lg:items-center':
+        isExpandedWithPanel || isNormalWithoutPanel,
+      'xl:flex-row xl:items-center': isNormalWithPanel,
+    }"
   >
     <div
       class="flex items-center gap-2 min-w-0 w-full"
-      :class="responsiveClasses.left"
+      :class="{
+        'md:flex-1 md:basis-0': isExpandedWithoutPanel,
+        'lg:flex-1 lg:basis-0': isExpandedWithPanel || isNormalWithoutPanel,
+        'xl:flex-1 xl:basis-0': isNormalWithPanel,
+      }"
     >
       <BackButton v-if="showBackButton" :back-url="backButtonUrl" />
 
@@ -135,7 +148,12 @@ const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
 
     <div
       class="flex items-center gap-2 min-w-0 w-full"
-      :class="responsiveClasses.right"
+      :class="{
+        'md:flex-1 md:basis-0 md:justify-end': isExpandedWithoutPanel,
+        'lg:flex-1 lg:basis-0 lg:justify-end':
+          isExpandedWithPanel || isNormalWithoutPanel,
+        'xl:flex-1 xl:basis-0 xl:justify-end': isNormalWithPanel,
+      }"
     >
       <div
         v-if="isSnoozed"