fix: Dashboard overflow issue if there is banner (#7748)

app/javascript/dashboard/App.vue

@@ -2,7 +2,7 @@
   <div
     v-if="!authUIFlags.isFetching"
     id="app"
-    class="app-wrapper app-root"
+    class="app-wrapper h-full flex-grow-0 min-h-0 w-full"
     :class="{ 'app-rtl--wrapper': isRTLView }"
     :dir="isRTLView ? 'rtl' : 'ltr'"
   >

app/javascript/dashboard/assets/scss/_layout.scss

@@ -9,87 +9,25 @@ body {
 }
 
 .app-wrapper {
-  @include full-height;
+  @apply h-full flex-grow-0 min-h-0 w-full;
-  flex-grow: 0;
+
-  min-height: 0;
+  .button--fixed-top {
-  width: 100%;
+    @apply fixed ltr:right-2 rtl:left-2 top-2 flex flex-row;
+  }
 }
 
 .banner + .app-wrapper {
+  // Reduce the height of the dashboard to make room for the banner.
+  // And causing the top right green-action button to be pushed down when scrolling.
+  @apply h-[calc(100%-48px)];
+
   .button--fixed-top {
-    top: 5.6 * $space-one;
+    @apply top-14;
   }
 
   .off-canvas-content {
     .button--fixed-top {
-      top: $space-small;
+      @apply top-2;
     }
   }
 }
-
-is-closed .app-root {
-  @include flex;
-  flex-direction: column;
-}
-
-.app-content {
-  @include flex;
-  @include full-height;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.view-box {
-  @include full-height;
-  @include space-between-column;
-
-  height: 100vh;
-  margin: 0;
-}
-
-.view-panel {
-  flex-direction: column;
-  margin: 0;
-  overflow-y: auto;
-  padding: $space-normal;
-}
-
-.content-box {
-  overflow: auto;
-  padding: $space-normal;
-}
-
-.back-button {
-  @include flex;
-
-  align-items: center;
-  color: $color-woot;
-  cursor: pointer;
-  font-size: $font-size-default;
-  font-weight: $font-weight-normal;
-  margin-right: $space-normal;
-
-  &::before {
-    font-size: $font-size-large;
-    margin-right: $space-small;
-    vertical-align: text-bottom;
-  }
-}
-
-.button-spinner {
-  float: right;
-}
-
-.no-items-error-message {
-  @include flex;
-  @include full-height;
-
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-
-  img {
-    max-width: $space-mega;
-    padding: $space-one;
-  }
-}

app/javascript/dashboard/assets/scss/_rtl.scss

@@ -1,20 +1,6 @@
 .app-rtl--wrapper {
   direction: rtl;
 
-  .header-section.back-button {
-    direction: initial;
-    margin-left: var(--space-normal);
-    margin-right: var(--space-smaller);
-  }
-
-  // Settings header action button
-  .button--fixed-top {
-    left: $space-small;
-    position: fixed;
-    right: unset;
-    top: $space-small;
-  }
-
   // Woot Tabs
   .tabs-title {
     &:first-child {

app/javascript/dashboard/assets/scss/_utility-helpers.scss

@@ -71,9 +71,3 @@
   align-items: center;
   display: flex;
 }
-
-.button--fixed-top {
-  position: fixed;
-  right: var(--space-small);
-  top: var(--space-small);
-}

app/javascript/dashboard/assets/scss/widgets/_buttons.scss

@@ -1,5 +1,5 @@
 .button {
-  @apply items-center inline-flex h-10 mb-0;
+  @apply items-center inline-flex h-10 mb-0 gap-2;
 
   .button__content {
     @apply w-full;
@@ -14,17 +14,9 @@
     @apply px-2 py-0;
   }
 
-  .icon--emoji + .button__content {
-    @apply pl-2 rtl:pr-2 rtl:pl-0;
-  }
-
-  .icon--font + .button__content {
-    @apply pl-2 rtl:pr-2 rtl:pl-0;
-  }
-
   // @TODDO - Remove after moving all buttons to woot-button
   .icon + .button__content {
-    @apply pl-2 w-auto rtl:pr-2 rtl:pl-0;
+    @apply w-auto;
   }
 
   &.expanded {
@@ -157,18 +149,10 @@
   // Sizes
   &.tiny {
     @apply h-6;
-
-    .icon + .button__content {
-      @apply pl-1 rtl:pr-1 rtl:pl-0;
-    }
   }
 
   &.small {
     @apply h-8 pb-1 pt-1;
-
-    .icon + .button__content {
-      @apply pl-1 rtl:pr-1 rtl:pl-0;
-    }
   }
 
   &.large {

app/javascript/dashboard/components/ui/Banner.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="banner" :class="bannerClasses">
+  <div
+    class="banner flex items-center h-12 gap-4 text-white dark:text-white text-xs py-3 px-4 justify-center"
+    :class="bannerClasses"
+  >
     <span class="banner-message">
       {{ bannerMessage }}
       <a
@@ -96,8 +99,6 @@ export default {
 
 <style lang="scss" scoped>
 .banner {
-  @apply flex items-center gap-4 text-white dark:text-white text-xs py-3 px-4 justify-center;
-
   &.primary {
     @apply bg-woot-500 dark:bg-woot-500;
     .banner-action__button {

app/javascript/dashboard/components/widgets/BackButton.vue

@@ -1,5 +1,8 @@
 <template>
-  <button class="header-section back-button" @click.capture="goBack">
+  <button
+    class="header-section flex items-center text-base font-normal mr-4 ml-2 cursor-pointer text-woot-500 dark:text-woot-500"
+    @click.capture="goBack"
+  >
     <fluent-icon icon="chevron-left" />
     {{ buttonLabel || $t('GENERAL_SETTINGS.BACK') }}
   </button>

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

@@ -8,7 +8,11 @@
       <div
         class="flex justify-center items-center mr-4 rtl:mr-0 rtl:ml-4 min-w-0"
       >
-        <back-button v-if="showBackButton" :back-url="backButtonUrl" />
+        <back-button
+          v-if="showBackButton"
+          :back-url="backButtonUrl"
+          class="ltr:ml-0 rtl:mr-0 rtl:ml-4"
+        />
         <Thumbnail
           :src="currentContact.thumbnail"
           :badge="inboxBadge"

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

@@ -1,5 +1,7 @@
 <template>
-  <div class="row app-wrapper dark:text-slate-300">
+  <div
+    class="app-wrapper h-full flex-grow-0 min-h-0 w-full max-w-full ml-auto mr-auto flex flex-wrap dark:text-slate-300"
+  >
     <sidebar
       :route="currentRoute"
       :show-secondary-sidebar="isSidebarOpen"
@@ -9,7 +11,7 @@
       @close-key-shortcut-modal="closeKeyShortcutModal"
       @show-add-label-popup="showAddLabelPopup"
     />
-    <section class="app-content flex-1 px-0">
+    <section class="flex h-full min-h-0 overflow-hidden flex-1 px-0">
       <router-view />
       <command-bar />
       <account-selector

app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue

@@ -4,7 +4,7 @@
       v-if="!uiFlags.isFetching && !macros.length"
       class="macros_list--empty-state"
     >
-      <p class="no-items-error-message">
+      <p class="flex h-full items-center flex-col justify-center">
         {{ $t('MACROS.LIST.404') }}
       </p>
       <router-link :to="addAccountScoping('settings/macros')">

app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="relative">
-    <div class="flex px-4 pb-1 pt-2.5 border-b border-transparent">
+    <div
+      class="flex px-4 pb-1 flex-row gap-1 pt-2.5 border-b border-transparent"
+    >
       <woot-sidemenu-icon
         size="tiny"
-        class="relative top-0 left-[-6px] rtl:left-0 rtl:right-[-6px]"
+        class="relative top-0 ltr:-ml-1.5 rtl:-mr-1.5"
       />
       <router-link
         :to="searchUrl"
-        class="search-link flex-1 items-center gap-1 text-left mr-1 rtl:mr-0 rtl:ml-1 h-6 rtl:text-right rounded-md px-2 py-0 bg-slate-25 dark:bg-slate-800 inline-flex"
+        class="search-link flex-1 items-center gap-1 text-left h-6 rtl:mr-3 rtl:text-right rounded-md px-2 py-0 bg-slate-25 dark:bg-slate-800 inline-flex"
       >
         <div class="flex">
           <fluent-icon

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full flex">
+  <div class="app-wrapper flex h-full flex-grow-0 min-h-0 w-full">
     <sidebar
       :route="currentRoute"
       @toggle-account-modal="toggleAccountModal"
@@ -18,7 +18,9 @@
       @open-popover="openPortalPopover"
       @open-modal="onClickOpenAddCategoryModal"
     />
-    <section class="app-content flex-1 px-0 bg-white dark:bg-slate-900">
+    <section
+      class="flex h-full min-h-0 overflow-hidden flex-1 px-0 bg-white dark:bg-slate-900"
+    >
       <router-view />
       <command-bar />
       <account-selector

app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue

@@ -18,7 +18,7 @@
             />
           </tbody>
         </table>
-        <p v-else class="no-items-error-message">
+        <p v-else class="flex h-full items-center flex-col justify-center">
           {{ $t('AGENT_BOTS.LIST.404') }}
         </p>
       </div>

app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue

@@ -5,7 +5,7 @@
       <div>
         <p
           v-if="!uiFlags.fetchingList && !records.length"
-          class="no-items-error-message"
+          class="flex h-full items-center flex-col justify-center"
         >
           {{ $t('AUDIT_LOGS.LIST.404') }}
         </p>

app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue

@@ -12,7 +12,7 @@
       <div class="w-[60%]">
         <p
           v-if="!uiFlags.isFetching && !records.length"
-          class="no-items-error-message"
+          class="flex h-full items-center flex-col justify-center"
         >
           {{ $t('AUTOMATION.LIST.404') }}
         </p>

app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue

@@ -14,7 +14,7 @@
       <div class="w-[60%]">
         <p
           v-if="!uiFlags.fetchingList && !records.length"
-          class="no-items-error-message"
+          class="flex h-full items-center flex-col justify-center"
         >
           {{ $t('CANNED_MGMT.LIST.404') }}
         </p>

app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue

@@ -3,7 +3,10 @@
     <!-- List Canned Response -->
     <div class="flex flex-row gap-4">
       <div class="w-[60%]">
-        <p v-if="!inboxesList.length" class="no-items-error-message">
+        <p
+          v-if="!inboxesList.length"
+          class="flex h-full items-center flex-col justify-center"
+        >
           {{ $t('INBOX_MGMT.LIST.404') }}
           <router-link
             v-if="isAdmin"

app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue

@@ -36,7 +36,7 @@
           </tr>
         </tbody>
       </table>
-      <p v-else class="no-items-error-message">
+      <p v-else class="flex h-full items-center flex-col justify-center">
         {{
           $t('INTEGRATION_APPS.NO_HOOK_CONFIGURED', {
             integrationId: integration.id,

app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue

@@ -12,7 +12,7 @@
       <div class="w-[60%]">
         <p
           v-if="!uiFlags.isFetching && !records.length"
-          class="no-items-error-message"
+          class="flex h-full items-center flex-col justify-center"
         >
           {{ $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.404') }}
         </p>

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue

@@ -13,7 +13,7 @@
       <div class="w-[60%]">
         <p
           v-if="!uiFlags.fetchingList && !records.length"
-          class="no-items-error-message"
+          class="flex h-full items-center flex-col justify-center"
         >
           {{ $t('INTEGRATION_SETTINGS.WEBHOOK.LIST.404') }}
         </p>

app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue

@@ -12,7 +12,7 @@
       <div class="w-[60%]">
         <p
           v-if="!uiFlags.isFetching && !records.length"
-          class="no-items-error-message"
+          class="flex h-full items-center flex-col justify-center"
         >
           {{ $t('LABEL_MGMT.LIST.404') }}
         </p>

app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue

@@ -12,7 +12,7 @@
     <div class="flex flex-row gap-4">
       <div class="w-[60%]">
         <div v-if="!uiFlags.isFetching && !records.length" class="p-3">
-          <p class="no-items-error-message">
+          <p class="flex h-full items-center flex-col justify-center">
             {{ $t('MACROS.LIST.404') }}
           </p>
         </div>

app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-auto overflow-auto flex-1 flex flex-col">
+  <div class="h-full overflow-auto flex-1 flex flex-col">
     <woot-loading-state
       v-if="uiFlags.isFetchingItem"
       :message="$t('MACROS.EDITOR.LOADING')"
@@ -140,10 +140,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-.content-box {
-  padding: 0;
-  height: 100vh;
-}
-</style>

app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="column content-box">
+  <div class="flex-1 overflow-auto p-4">
     <report-filter-selector
       :show-agents-filter="true"
       :show-inbox-filter="true"

app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="column content-box">
+  <div class="flex-1 overflow-auto p-4">
     <woot-button
       color-scheme="success"
       class-names="button--fixed-top"

app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="column content-box">
+  <div class="flex-1 overflow-auto p-4">
     <div class="row">
       <div class="column small-12 medium-8 conversation-metric">
         <metric-card

app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="column content-box">
+  <div class="flex-1 overflow-auto p-4">
     <woot-button
       color-scheme="success"
       class-names="button--fixed-top"

app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue

@@ -2,7 +2,10 @@
   <div class="flex-1 overflow-auto p-4">
     <div class="flex flex-row gap-4">
       <div class="w-[60%]">
-        <p v-if="!teamsList.length" class="no-items-error-message">
+        <p
+          v-if="!teamsList.length"
+          class="flex h-full items-center flex-col justify-center"
+        >
           {{ $t('TEAMS_SETTINGS.LIST.404') }}
           <router-link
             v-if="isAdmin"