feat: Uses expanded layout as default if the breakpoint is below 992px

app/javascript/dashboard/assets/scss/widgets/_conv-header.scss

@@ -42,7 +42,6 @@ $resolve-button-width: 13.2rem;
     margin-right: var(--space-normal);
     min-width: 0;
 
-
     .user--profile__meta {
       align-items: flex-start;
       display: flex;
@@ -54,7 +53,6 @@ $resolve-button-width: 13.2rem;
   }
 }
 
-
 .header-actions-wrap {
   align-items: center;
   display: flex;
@@ -65,4 +63,8 @@ $resolve-button-width: 13.2rem;
   &.has-open-sidebar {
     justify-content: flex-end;
   }
+
+  @include breakpoint(640px down) {
+    margin-top: var(--space-small);
+  }
 }

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

@@ -326,6 +326,7 @@
     .is-text {
       display: inline-flex;
       text-align: start;
+      align-items: center;
 
       @include breakpoint(xxxlarge up) {
         display: flex;

app/javascript/dashboard/components/ChatList.vue

@@ -794,16 +794,16 @@ export default {
 
 .conversations-list-wrap {
   flex-shrink: 0;
-  width: 34rem;
+  flex-basis: 34rem;
   overflow: hidden;
   @include breakpoint(large up) {
-    width: 36rem;
+    flex-basis: 36rem;
   }
   @include breakpoint(xlarge up) {
-    width: 35rem;
+    flex-basis: 38rem;
   }
   @include breakpoint(xxlarge up) {
-    width: 38rem;
+    flex-basis: 42rem;
   }
   @include breakpoint(xxxlarge up) {
     flex-basis: 46rem;
@@ -814,12 +814,9 @@ export default {
   }
 
   &.list--full-width {
-    width: 100%;
-    @include breakpoint(xxxlarge up) {
     flex-basis: 100%;
   }
 }
-}
 .filter--actions {
   display: flex;
   align-items: center;

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -233,9 +233,6 @@ export default {
     width: 40rem;
   }
 }
-.off-canvas-content.is-open-left {
-  transform: translateX(18.8rem);
-}
 
 .secondary-sidebar {
   overflow-y: auto;

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -376,6 +376,10 @@ export default {
   display: flex;
   flex-direction: column;
 
+  .ProseMirror-menubar {
+    min-height: var(--space-two) !important;
+  }
+
   > .ProseMirror {
     padding: 0;
     word-break: break-word;

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

@@ -166,11 +166,15 @@ export default {
 .conversation-sidebar-wrap {
   height: auto;
   flex: 0 0;
-  overflow: hidden;
+  z-index: var(--z-index-low);
   overflow: auto;
   background: white;
   flex-basis: 28rem;
 
+  @include breakpoint(768px down) {
+    flex-basis: fit-content;
+  }
+
   @include breakpoint(large up) {
     flex-basis: 30em;
   }

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

@@ -1,5 +1,6 @@
 <template>
   <div class="conv-header">
+    <div class="conversation-header--details">
       <div class="user">
         <back-button v-if="showBackButton" :back-url="backButtonUrl" />
         <Thumbnail
@@ -20,7 +21,7 @@
               icon="warning"
             />
           </h3>
-        <div class="conversation--header--actions">
+          <div class="conversation--header--actions text-truncate">
             <inbox-name
               v-if="hasMultipleInboxes"
               :inbox="inbox"
@@ -50,6 +51,7 @@
         <more-actions :conversation-id="currentChat.id" />
       </div>
     </div>
+  </div>
 </template>
 <script>
 import { hasPressedAltAndOKey } from 'shared/helpers/KeyboardHelpers';
@@ -165,14 +167,26 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.text-truncate {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+@import '~dashboard/assets/scss/woot';
 
 .conv-header {
   flex: 0 0 var(--space-jumbo);
+
+  @include breakpoint(640px down) {
+    flex-direction: row;
+  }
+}
+
+.conversation-header--details {
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+
+  @include breakpoint(640px down) {
+    flex-direction: column;
+  }
 }
 
 .option__desc {

app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue

@@ -280,6 +280,7 @@ export default {
 .message-text--metadata {
   align-items: flex-start;
   display: flex;
+  margin-left: var(--space-small);
 
   .time {
     margin-right: var(--space-small);

app/javascript/dashboard/routes/dashboard/Dashboard.vue

@@ -47,6 +47,7 @@ import AccountSelector from 'dashboard/components/layout/sidebarComponents/Accou
 import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel';
 import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import wootConstants from 'dashboard/constants';
 
 export default {
   components: {
@@ -67,6 +68,7 @@ export default {
       showAddLabelModal: false,
       showShortcutModal: false,
       isNotificationPanel: false,
+      isDesktopView: false,
     };
   },
   computed: {
@@ -77,14 +79,40 @@ export default {
       const { show_secondary_sidebar: showSecondarySidebar } = this.uiSettings;
       return showSecondarySidebar;
     },
+    previouslyUsedDisplayType() {
+      const {
+        previously_used_conversation_display_type: conversationDisplayType,
+      } = this.uiSettings;
+      return conversationDisplayType;
+    },
+  },
+  watch: {
+    isDesktopView() {
+      const { LAYOUT_TYPES } = wootConstants;
+      this.updateUISettings({
+        conversation_display_type: !this.isDesktopView
+          ? LAYOUT_TYPES.EXPANDED
+          : this.previouslyUsedDisplayType,
+      });
+    },
   },
   mounted() {
+    window.addEventListener('resize', this.handleResize);
+    this.handleResize();
     bus.$on(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
   },
   beforeDestroy() {
     bus.$off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
+    window.removeEventListener('resize', this.handleResize);
   },
   methods: {
+    handleResize() {
+      if (window.innerWidth <= 992) {
+        this.isDesktopView = false;
+      } else {
+        this.isDesktopView = true;
+      }
+    },
     toggleSidebar() {
       this.updateUISettings({
         show_secondary_sidebar: !this.isSidebarOpen,

app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue

@@ -133,7 +133,10 @@ export default {
         conversationDisplayType === LAYOUT_TYPES.CONDENSED
           ? LAYOUT_TYPES.EXPANDED
           : LAYOUT_TYPES.CONDENSED;
-      this.updateUISettings({ conversation_display_type: newViewType });
+      this.updateUISettings({
+        conversation_display_type: newViewType,
+        previously_used_conversation_display_type: newViewType,
+      });
     },
     fetchConversationIfUnavailable() {
       if (!this.conversationId) {

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

@@ -109,14 +109,7 @@ export default {
   flex-shrink: 0;
   overflow: hidden;
   padding: var(--space-small);
-
-  @include breakpoint(xlarge down) {
-    position: absolute;
-  }
-
-  @include breakpoint(xlarge up) {
   position: unset;
-  }
 
   &:hover {
     overflow: auto;