Change a lot to make it work

app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue

@@ -83,7 +83,7 @@ export default {
 
 <!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
-  <div v-if="hasOpenedAtleastOnce" class="dashboard-app--container">
+  <div v-if="hasOpenedAtleastOnce" class="flex-1">
     <div
       v-for="(configItem, index) in config"
       :key="index"
@@ -115,6 +115,7 @@ export default {
 .dashboard-app--list iframe {
   border: 0;
 }
+
 .dashboard-app_loading-container {
   display: flex;
   align-items: center;

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

@@ -125,7 +125,7 @@ export default {
         :show-badge="false"
       />
     </woot-tabs>
-    <div v-show="!activeIndex" class="flex h-full min-h-0 m-0">
+    <div v-show="!activeIndex" class="flex-1 h-full min-h-0 m-0">
       <MessagesView
         v-if="currentChat.id"
         :inbox-id="inboxId"

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

@@ -13,8 +13,6 @@ import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import Linear from './linear/index.vue';
 
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
 export default {
   components: {
     BackButton,
@@ -23,7 +21,6 @@ export default {
     Thumbnail,
     SLACardLabel,
     Linear,
-    NextButton,
   },
   mixins: [inboxMixin],
   props: {
@@ -99,13 +96,7 @@ export default {
       }
       return this.$t('CONVERSATION.HEADER.SNOOZED_UNTIL_NEXT_REPLY');
     },
-    contactPanelToggleText() {
-      return `${
-        this.isContactPanelOpen
-          ? this.$t('CONVERSATION.HEADER.CLOSE')
-          : this.$t('CONVERSATION.HEADER.OPEN')
-      } ${this.$t('CONVERSATION.HEADER.DETAILS')}`;
-    },
+
     inbox() {
       const { inbox_id: inboxId } = this.chat;
       return this.$store.getters['inboxes/getInbox'](inboxId);
@@ -133,7 +124,7 @@ export default {
 
 <template>
   <div
-    class="flex flex-col items-center justify-between px-4 py-2 border-b bg-n-background border-n-weak md:flex-row"
+    class="flex flex-col items-center justify-between px-3 border-b bg-n-background border-n-weak md:flex-row h-12"
   >
     <div
       class="flex flex-col items-center justify-center flex-1 w-full min-w-0"
@@ -150,20 +141,18 @@ export default {
           :badge="inboxBadge"
           :username="currentContact.name"
           :status="currentContact.availability_status"
+          size="32px"
         />
         <div
           class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2 w-fit"
         >
-          <div
-            class="flex flex-row items-center max-w-full gap-1 p-0 m-0 w-fit"
-          >
-            <NextButton link slate @click.prevent="$emit('contactPanelToggle')">
-              <span
-                class="text-base font-medium truncate leading-tight text-n-slate-12"
-              >
-                {{ currentContact.name }}
-              </span>
-            </NextButton>
+          <div class="flex items-center max-w-full gap-1 p-0 m-0 w-fit">
+            <span
+              class="text-sm font-medium truncate leading-tight text-n-slate-12"
+            >
+              {{ currentContact.name }}
+            </span>
+
             <fluent-icon
               v-if="!isHMACVerified"
               v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
@@ -180,13 +169,6 @@ export default {
             <span v-if="isSnoozed" class="font-medium text-n-amber-10">
               {{ snoozedDisplayText }}
             </span>
-            <NextButton
-              link
-              xs
-              blue
-              :label="contactPanelToggleText"
-              @click="$emit('contactPanelToggle')"
-            />
           </div>
         </div>
       </div>