feat: Uses expanded layout as default if the breakpoint is less than or equal to 992px (#6134)

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

* fixes: ES lint issue

* chore: Review fixes

* chore: Hide toggle sidebar menu in profile settings

* chore: Fix login screen

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

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

* chore: Review fixes

* chore: Review fixes

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>

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,53 @@ 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() {
+    this.handleResize();
+    window.addEventListener('resize', this.handleResize);
     bus.$on(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
   },
   beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize);
     bus.$off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
   },
+
   methods: {
+    handleResize() {
+      const { SMALL_SCREEN_BREAKPOINT } = wootConstants;
+      let throttled = false;
+      const delay = 150;
+
+      if (throttled) {
+        return;
+      }
+      throttled = true;
+
+      setTimeout(() => {
+        throttled = false;
+        if (window.innerWidth <= SMALL_SCREEN_BREAKPOINT) {
+          this.isDesktopView = false;
+        } else {
+          this.isDesktopView = true;
+        }
+      }, delay);
+    },
     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;
-  }
+  position: unset;
 
   &:hover {
     overflow: auto;

app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js

@@ -13,6 +13,7 @@ export default {
         headerTitle: 'PROFILE_SETTINGS.TITLE',
         icon: 'edit',
         showNewButton: false,
+        showSidemenuIcon: false,
       },
       children: [
         {