chore: Improve layout styles (#12025)

# Pull Request Template ## Description This PR fixes the layout overflow scroll issue and removes unused CSS. It also optimizes the display of the Sidebar, Copilot Panel, and Conversation Panel in the mobile view. Additionally, it resolves a runtime console warning. ## Type of change - [x] Bug fix (non-breaking change which fixes an issue) ## How Has This Been Tested? ### Screencast https://github.com/user-attachments/assets/7e8885fa-6174-4740-80f1-bb1cec6517fc ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
2025-07-31 02:19:27 +05:30
parent b434279422
commit 86cb4fd809
16 changed files with 226 additions and 155 deletions
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
@@ -8,6 +8,7 @@ import UpgradePage from 'dashboard/routes/dashboard/upgrade/UpgradePage.vue';

 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useAccount } from 'dashboard/composables/useAccount';
+import { useWindowSize } from '@vueuse/core';

 import wootConstants from 'dashboard/constants/globals';

@@ -18,6 +19,8 @@ const CommandBar = defineAsyncComponent(
 import CopilotLauncher from 'dashboard/components-next/copilot/CopilotLauncher.vue';
 import CopilotContainer from 'dashboard/components/copilot/CopilotContainer.vue';

+import MobileSidebarLauncher from 'dashboard/components-next/sidebar/MobileSidebarLauncher.vue';
+
 export default {
  components: {
    NextSidebar,
@@ -27,17 +30,20 @@ export default {
    UpgradePage,
    CopilotLauncher,
    CopilotContainer,
+    MobileSidebarLauncher,
  },
  setup() {
    const upgradePageRef = ref(null);
    const { uiSettings, updateUISettings } = useUISettings();
    const { accountId } = useAccount();
+    const { width: windowWidth } = useWindowSize();

    return {
      uiSettings,
      updateUISettings,
      accountId,
      upgradePageRef,
+      windowWidth,
    };
  },
  data() {
@@ -45,10 +51,13 @@ export default {
      showAccountModal: false,
      showCreateAccountModal: false,
      showShortcutModal: false,
-      displayLayoutType: '',
+      isMobileSidebarOpen: false,
    };
  },
  computed: {
+    isSmallScreen() {
+      return this.windowWidth < wootConstants.SMALL_SCREEN_BREAKPOINT;
+    },
    showUpgradePage() {
      return this.upgradePageRef?.shouldShowUpgradePage;
    },
@@ -66,54 +75,30 @@ export default {
      } = this.uiSettings;
      return conversationDisplayType;
    },
-    previouslyUsedSidebarView() {
-      const { previously_used_sidebar_view: showSecondarySidebar } =
-        this.uiSettings;
-      return showSecondarySidebar;
-    },
  },
  watch: {
-    displayLayoutType() {
-      const { LAYOUT_TYPES } = wootConstants;
-      this.updateUISettings({
-        conversation_display_type:
-          this.displayLayoutType === LAYOUT_TYPES.EXPANDED
-            ? LAYOUT_TYPES.EXPANDED
-            : this.previouslyUsedDisplayType,
-        show_secondary_sidebar:
-          this.displayLayoutType === LAYOUT_TYPES.EXPANDED
-            ? false
-            : this.previouslyUsedSidebarView,
-      });
+    isSmallScreen: {
+      handler() {
+        const { LAYOUT_TYPES } = wootConstants;
+        if (window.innerWidth <= wootConstants.SMALL_SCREEN_BREAKPOINT) {
+          this.updateUISettings({
+            conversation_display_type: LAYOUT_TYPES.EXPANDED,
+          });
+        } else {
+          this.updateUISettings({
+            conversation_display_type: this.previouslyUsedDisplayType,
+          });
+        }
+      },
+      immediate: true,
    },
  },
-  mounted() {
-    this.handleResize();
-    window.addEventListener('resize', this.handleResize);
-  },
-  unmounted() {
-    window.removeEventListener('resize', this.handleResize);
-  },
-
  methods: {
-    handleResize() {
-      const { SMALL_SCREEN_BREAKPOINT, LAYOUT_TYPES } = wootConstants;
-      let throttled = false;
-      const delay = 150;
-
-      if (throttled) {
-        return;
-      }
-      throttled = true;
-
-      setTimeout(() => {
-        throttled = false;
-        if (window.innerWidth <= SMALL_SCREEN_BREAKPOINT) {
-          this.displayLayoutType = LAYOUT_TYPES.EXPANDED;
-        } else {
-          this.displayLayoutType = LAYOUT_TYPES.CONDENSED;
-        }
-      }, delay);
+    toggleMobileSidebar() {
+      this.isMobileSidebarOpen = !this.isMobileSidebarOpen;
+    },
+    closeMobileSidebar() {
+      this.isMobileSidebarOpen = false;
    },
    openCreateAccountModal() {
      this.showAccountModal = false;
@@ -136,23 +121,35 @@ export default {
 </script>

 <template>
-  <div class="flex flex-wrap app-wrapper text-n-slate-12">
+  <div class="flex flex-grow overflow-hidden text-n-slate-12">
    <NextSidebar
+      :is-mobile-sidebar-open="isMobileSidebarOpen"
      @toggle-account-modal="toggleAccountModal"
      @open-key-shortcut-modal="toggleKeyShortcutModal"
      @close-key-shortcut-modal="closeKeyShortcutModal"
      @show-create-account-modal="openCreateAccountModal"
+      @close-mobile-sidebar="closeMobileSidebar"
    />
-    <main class="flex flex-1 h-full min-h-0 px-0 overflow-hidden">
+
+    <main class="flex flex-1 h-full w-full min-h-0 px-0 overflow-hidden">
      <UpgradePage
        v-show="showUpgradePage"
        ref="upgradePageRef"
        :bypass-upgrade-page="bypassUpgradePage"
-      />
+      >
+        <MobileSidebarLauncher
+          :is-mobile-sidebar-open="isMobileSidebarOpen"
+          @toggle="toggleMobileSidebar"
+        />
+      </UpgradePage>
      <template v-if="!showUpgradePage">
        <router-view />
        <CommandBar />
        <CopilotLauncher />
+        <MobileSidebarLauncher
+          :is-mobile-sidebar-open="isMobileSidebarOpen"
+          @toggle="toggleMobileSidebar"
+        />
        <CopilotContainer />
      </template>
      <AddAccountModal
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
@@ -31,7 +31,7 @@ export default {
    slate
    xs
    faded
-    class="flex-shrink-0 rtl:rotate-180 ltr:rotate-0"
+    class="flex-shrink-0 rtl:rotate-180 ltr:rotate-0 md:inline-flex hidden"
    @click="toggle"
  />
 </template>
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue
@@ -68,7 +68,7 @@ export default {

 <template>
  <div
-    class="flex flex-col gap-12 sm:gap-16 items-center justify-center py-0 px-4 md:px-0 w-full min-h-screen max-w-full overflow-auto bg-n-background"
+    class="flex flex-col gap-12 sm:gap-16 items-center justify-center py-0 px-4 w-full min-h-screen max-w-full overflow-auto bg-n-background"
  >
    <div class="flex flex-col justify-start sm:justify-center gap-6">
      <div class="flex flex-col gap-1.5 items-start sm:items-center">
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue
@@ -64,7 +64,7 @@ watch(
 </script>

 <template>
-  <div class="flex flex-grow-0 w-full h-full min-h-0 app-wrapper">
+  <div class="flex w-full h-full min-h-0">
    <section
      v-if="isHelpCenterEnabled"
      class="flex flex-1 h-full px-0 overflow-hidden bg-n-background"
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -1,32 +1,21 @@
 <script>
 import { useAdmin } from 'dashboard/composables/useAdmin';
 import BackButton from '../../../components/widgets/BackButton.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';

 export default {
  components: {
    BackButton,
-    NextButton,
  },
  props: {
    headerTitle: {
      default: '',
      type: String,
    },
-    buttonRoute: {
-      default: '',
-      type: String,
-    },
-    buttonText: {
-      default: '',
-      type: String,
-    },
    icon: {
      default: '',
      type: String,
    },
    showBackButton: { type: Boolean, default: false },
-    showNewButton: { type: Boolean, default: false },
    backUrl: {
      type: [String, Object],
      default: '',
@@ -67,14 +56,5 @@ export default {
        {{ headerTitle }}
      </span>
    </h1>
-    <!-- TODO: Remove this when we are not using this -->
-    <router-link v-if="showNewButton && isAdmin" :to="buttonRoute">
-      <NextButton
-        teal
-        icon="i-lucide-circle-plus"
-        class="button--fixed-top"
-        :label="buttonText"
-      />
-    </router-link>
  </div>
 </template>
--- a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
@@ -2,13 +2,10 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import SettingsHeader from './SettingsHeader.vue';
-
 const props = defineProps({
  headerTitle: { type: String, default: '' },
-  headerButtonText: { type: String, default: '' },
  icon: { type: String, default: '' },
  keepAlive: { type: Boolean, default: true },
-  newButtonRoutes: { type: Array, default: () => [] },
  showBackButton: { type: Boolean, default: false },
  backUrl: { type: [String, Object], default: '' },
  fullWidth: { type: Boolean, default: false },
@@ -16,16 +13,8 @@ const props = defineProps({

 const { t } = useI18n();

-const showNewButton = computed(
-  () => props.newButtonRoutes.length && !props.showBackButton
-);
-
 const showSettingsHeader = computed(
-  () =>
-    props.headerTitle ||
-    props.icon ||
-    props.showBackButton ||
-    showNewButton.value
+  () => props.headerTitle || props.icon || props.showBackButton
 );
 </script>

@@ -37,13 +26,10 @@ const showSettingsHeader = computed(
    >
      <SettingsHeader
        v-if="showSettingsHeader"
-        button-route="new"
        :icon="icon"
        :header-title="t(headerTitle)"
-        :button-text="t(headerButtonText)"
        :show-back-button="showBackButton"
        :back-url="backUrl"
-        :show-new-button="showNewButton"
        class="sticky top-0 z-20"
        :class="{ 'max-w-6xl w-full mx-auto': fullWidth }"
      />
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
@@ -42,9 +42,7 @@ export default {
        const fullWidth = params.name === 'settings_inbox_show';
        return {
          headerTitle: 'INBOX_MGMT.HEADER',
-          headerButtonText: 'SETTINGS.INBOXES.NEW_INBOX',
          icon: 'mail-inbox-all',
-          newButtonRoutes: ['settings_inbox_list'],
          showBackButton,
          fullWidth,
        };
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js
@@ -41,9 +41,7 @@ export default {
      props: () => {
        return {
          headerTitle: 'TEAMS_SETTINGS.HEADER',
-          headerButtonText: 'TEAMS_SETTINGS.NEW_TEAM',
          icon: 'people-team',
-          newButtonRoutes: ['settings_teams_new'],
          showBackButton: true,
        };
      },
--- a/app/javascript/dashboard/routes/dashboard/upgrade/UpgradePage.vue
+++ b/app/javascript/dashboard/routes/dashboard/upgrade/UpgradePage.vue
@@ -106,42 +106,44 @@ defineExpose({ shouldShowUpgradePage });
 </script>

 <template>
-  <template v-if="shouldShowUpgradePage">
-    <div class="mx-auto h-full pt-[clamp(3rem,15vh,12rem)]">
-      <div
-        class="flex flex-col gap-4 max-w-md px-8 py-6 shadow-lg bg-n-solid-1 rounded-xl outline outline-1 outline-n-container"
-      >
-        <div class="flex flex-col gap-4">
-          <div class="flex items-center w-full gap-2">
-            <span
-              class="flex items-center justify-center w-6 h-6 rounded-full bg-n-solid-blue"
-            >
-              <Icon
-                class="flex-shrink-0 text-n-brand size-[14px]"
-                icon="i-lucide-lock-keyhole"
-              />
-            </span>
-            <span class="text-base font-medium text-n-slate-12">
-              {{ $t('GENERAL_SETTINGS.UPGRADE') }}
-            </span>
-          </div>
-          <div>
-            <p class="text-sm font-normal text-n-slate-11 mb-3">
-              {{ limitExceededMessage }}
-            </p>
-            <p v-if="!isAdmin">
-              {{ t('GENERAL_SETTINGS.LIMIT_MESSAGES.NON_ADMIN') }}
-            </p>
-          </div>
+  <div
+    v-if="shouldShowUpgradePage"
+    class="mx-auto h-full pt-[clamp(3rem,15vh,12rem)]"
+  >
+    <div
+      class="flex flex-col gap-4 max-w-md px-8 py-6 shadow-lg bg-n-solid-1 rounded-xl outline outline-1 outline-n-container"
+    >
+      <div class="flex flex-col gap-4">
+        <div class="flex items-center w-full gap-2">
+          <span
+            class="flex items-center justify-center w-6 h-6 rounded-full bg-n-solid-blue"
+          >
+            <Icon
+              class="flex-shrink-0 text-n-brand size-[14px]"
+              icon="i-lucide-lock-keyhole"
+            />
+          </span>
+          <span class="text-base font-medium text-n-slate-12">
+            {{ $t('GENERAL_SETTINGS.UPGRADE') }}
+          </span>
+        </div>
+        <div>
+          <p class="text-sm font-normal text-n-slate-11 mb-3">
+            {{ limitExceededMessage }}
+          </p>
+          <p v-if="!isAdmin">
+            {{ t('GENERAL_SETTINGS.LIMIT_MESSAGES.NON_ADMIN') }}
+          </p>
        </div>
-        <NextButton
-          v-if="isAdmin"
-          :label="$t('GENERAL_SETTINGS.OPEN_BILLING')"
-          icon="i-lucide-credit-card"
-          @click="routeToBilling()"
-        />
      </div>
+      <NextButton
+        v-if="isAdmin"
+        :label="$t('GENERAL_SETTINGS.OPEN_BILLING')"
+        icon="i-lucide-credit-card"
+        @click="routeToBilling()"
+      />
    </div>
-  </template>
-  <template v-else />
+    <slot />
+  </div>
+  <div v-else />
 </template>