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

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"