From 55972cc17aec3eff6e4ca24f8456d7316fb24603 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 21 Aug 2023 12:22:50 +0530
Subject: [PATCH] fix: Dashboard overflow issue if there is banner (#7748)

---
 app/javascript/dashboard/App.vue              |  2 +-
 .../dashboard/assets/scss/_layout.scss        | 84 +++----------------
 .../dashboard/assets/scss/_rtl.scss           | 14 ----
 .../assets/scss/_utility-helpers.scss         |  6 --
 .../assets/scss/widgets/_buttons.scss         | 20 +----
 .../dashboard/components/ui/Banner.vue        |  7 +-
 .../components/widgets/BackButton.vue         |  5 +-
 .../conversation/ConversationHeader.vue       |  6 +-
 .../dashboard/routes/dashboard/Dashboard.vue  |  6 +-
 .../dashboard/conversation/Macros/List.vue    |  2 +-
 .../conversation/search/PopOverSearch.vue     |  8 +-
 .../components/HelpCenterLayout.vue           |  6 +-
 .../dashboard/settings/agentBots/Index.vue    |  2 +-
 .../dashboard/settings/auditlogs/Index.vue    |  2 +-
 .../dashboard/settings/automation/Index.vue   |  2 +-
 .../dashboard/settings/canned/Index.vue       |  2 +-
 .../routes/dashboard/settings/inbox/Index.vue |  5 +-
 .../MultipleIntegrationHooks.vue              |  2 +-
 .../integrations/DashboardApps/Index.vue      |  2 +-
 .../settings/integrations/Webhooks/Index.vue  |  2 +-
 .../dashboard/settings/labels/Index.vue       |  2 +-
 .../dashboard/settings/macros/Index.vue       |  2 +-
 .../dashboard/settings/macros/MacroEditor.vue |  9 +-
 .../settings/reports/CsatResponses.vue        |  2 +-
 .../dashboard/settings/reports/Index.vue      |  2 +-
 .../settings/reports/LiveReports.vue          |  2 +-
 .../reports/components/WootReports.vue        |  2 +-
 .../routes/dashboard/settings/teams/Index.vue |  5 +-
 28 files changed, 63 insertions(+), 148 deletions(-)

diff --git a/app/javascript/dashboard/App.vue b/app/javascript/dashboard/App.vue
index 05888c5c7..b115f17b5 100644
--- a/app/javascript/dashboard/App.vue
+++ b/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'"
   >
diff --git a/app/javascript/dashboard/assets/scss/_layout.scss b/app/javascript/dashboard/assets/scss/_layout.scss
index 952274321..594a14d95 100644
--- a/app/javascript/dashboard/assets/scss/_layout.scss
+++ b/app/javascript/dashboard/assets/scss/_layout.scss
@@ -9,87 +9,25 @@ body {
 }
 
 .app-wrapper {
-  @include full-height;
-  flex-grow: 0;
-  min-height: 0;
-  width: 100%;
+  @apply h-full flex-grow-0 min-h-0 w-full;
+
+  .button--fixed-top {
+    @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;
-  }
-}
diff --git a/app/javascript/dashboard/assets/scss/_rtl.scss b/app/javascript/dashboard/assets/scss/_rtl.scss
index 14897b245..6f16a2af4 100644
--- a/app/javascript/dashboard/assets/scss/_rtl.scss
+++ b/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 {
diff --git a/app/javascript/dashboard/assets/scss/_utility-helpers.scss b/app/javascript/dashboard/assets/scss/_utility-helpers.scss
index a8025ba66..99f0fe3eb 100644
--- a/app/javascript/dashboard/assets/scss/_utility-helpers.scss
+++ b/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);
-}
diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
index ab41dafdf..bcdc6176f 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/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 {
diff --git a/app/javascript/dashboard/components/ui/Banner.vue b/app/javascript/dashboard/components/ui/Banner.vue
index 8ffe410e2..5d680fe48 100644
--- a/app/javascript/dashboard/components/ui/Banner.vue
+++ b/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 {
diff --git a/app/javascript/dashboard/components/widgets/BackButton.vue b/app/javascript/dashboard/components/widgets/BackButton.vue
index 3c1b07a4c..c02902ed6 100644
--- a/app/javascript/dashboard/components/widgets/BackButton.vue
+++ b/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>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index d58b81c6d..1484155c7 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/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"
diff --git a/app/javascript/dashboard/routes/dashboard/Dashboard.vue b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
index 308d330a8..7adaf12d7 100644
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/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
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue b/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue
index d16051ce7..ff660bbf0 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue
+++ b/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')">
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
index cf5780fb4..639b694e8 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
+++ b/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
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
index 629e92d83..d1801caca 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+++ b/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
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
index 975abc287..45cedd323 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
+++ b/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>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
index f16a9e1bc..f81bdc9ee 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
+++ b/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>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
index 5113c85a5..886f7bd34 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/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>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
index c9cb7e77d..1b83aa594 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/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>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
index 2f6dd2ec3..c03134dce 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/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"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue
index 4880101a6..624e7fbf5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue
+++ b/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,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
index 470f6a6d7..33a9a567c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
+++ b/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>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
index 2d4de19a2..365b2bb6c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
+++ b/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>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
index 58287587d..281c52d4c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
+++ b/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>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
index 80666712f..b8c97d0ca 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
+++ b/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>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
index f43ef1285..1a1b5cba4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
+++ b/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>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
index 7d29fc8d9..20c238470 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
+++ b/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"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
index 4ab4a8216..7ed4d6bbc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
+++ b/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"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
index a0cdf02cc..01382ce05 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
+++ b/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
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
index 6ed2545b6..8fbc3b094 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
+++ b/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"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
index 019a82ad3..59aaed912 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
+++ b/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"