chore: Fix small screens

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

@@ -8,7 +8,7 @@
       :chat="currentChat"
       :is-inbox-view="isInboxView"
       :is-contact-panel-open="isContactPanelOpen"
-      :show-back-button="isOnExpandedLayout"
+      :show-back-button="isOnExpandedLayout && !isInboxView"
       @contact-panel-toggle="onToggleContactPanel"
     />
     <woot-tabs

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

@@ -3,10 +3,11 @@
     class="bg-white dark:bg-slate-900 flex justify-between items-center py-2 px-4 border-b border-slate-50 dark:border-slate-800/50 flex-col md:flex-row"
   >
     <div
-      class="flex-1 w-full min-w-0 flex flex-col md:flex-row items-center justify-center"
+      class="flex-1 w-full min-w-0 flex flex-col items-center justify-center"
+      :class="isInboxView ? 'sm:flex-row' : 'md:flex-row'"
     >
       <div
-        class="flex justify-start items-center mr-4 rtl:mr-0 rtl:ml-4 min-w-0 w-[inherit]"
+        class="flex justify-start items-center mr-4 rtl:mr-0 rtl:ml-4 min-w-0 w-fit max-w-full"
       >
         <back-button
           v-if="showBackButton"
@@ -20,9 +21,11 @@
           :status="currentContact.availability_status"
         />
         <div
-          class="items-start flex flex-col ml-2 rtl:ml-0 rtl:mr-2 min-w-0 w-[inherit] overflow-hidden"
+          class="items-start flex flex-col ml-2 rtl:ml-0 rtl:mr-2 min-w-0 w-fit overflow-hidden"
         >
-          <div class="flex items-center flex-row gap-1 m-0 p-0 w-[inherit]">
+          <div
+            class="flex items-center flex-row gap-1 m-0 p-0 w-fit max-w-full"
+          >
             <woot-button
               variant="link"
               color-scheme="secondary"
@@ -87,7 +90,6 @@ import Thumbnail from '../Thumbnail.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { conversationListPageURL } from 'dashboard/helper/URLHelper';
 import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
-import { frontendURL } from 'dashboard/helper/URLHelper';
 
 export default {
   components: {
@@ -128,9 +130,6 @@ export default {
         params: { accountId, inbox_id: inboxId, label, teamId },
         name,
       } = this.$route;
-      if (this.isInboxView) {
-        return frontendURL(`accounts/${accountId}/inbox-view`);
-      }
       return conversationListPageURL({
         accountId,
         inboxId,

app/javascript/dashboard/i18n/locale/en/inbox.json

@@ -13,7 +13,8 @@
     },
     "ACTION_HEADER": {
       "SNOOZE": "Snooze notification",
-      "DELETE": "Delete notification"
+      "DELETE": "Delete notification",
+      "BACK": "Back"
     },
     "TYPES": {
       "CONVERSATION_MENTION": "You have been mentioned in a conversation",

app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue

@@ -1,7 +1,6 @@
 <template>
   <div
-    class="flex flex-col h-full w-full ltr:border-r border-slate-50 dark:border-slate-800/50"
-    :class="isOnExpandedLayout ? '' : 'min-w-[360px] max-w-[360px]'"
+    class="flex flex-col h-full w-full md:min-w-[360px] md:max-w-[360px] ltr:border-r border-slate-50 dark:border-slate-800/50"
   >
     <inbox-list-header
       :is-context-menu-open="isInboxContextMenuOpen"
@@ -62,10 +61,6 @@ export default {
       type: [String, Number],
       default: 0,
     },
-    isOnExpandedLayout: {
-      type: Boolean,
-      default: false,
-    },
   },
   data() {
     return {

app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue

@@ -1,14 +1,12 @@
 <template>
   <section class="flex w-full h-full bg-white dark:bg-slate-900">
     <inbox-list
-      v-show="showConversationList"
+      :class="!notificationId ? 'flex' : 'hidden md:flex'"
       :notification-id="notificationId"
-      :is-on-expanded-layout="isOnExpandedLayout"
     />
     <div
       v-if="showInboxMessageView"
-      class="flex flex-col h-full"
-      :class="isOnExpandedLayout ? 'w-full' : 'w-[calc(100%-360px)]'"
+      class="flex flex-col h-full w-full md:w-[calc(100%-360px)]"
     >
       <inbox-item-header
         :total-length="totalNotifications"
@@ -22,13 +20,13 @@
         is-inbox-view
         :inbox-id="inboxId"
         :is-contact-panel-open="isContactPanelOpen"
-        :is-on-expanded-layout="isOnExpandedLayout"
+        :is-on-expanded-layout="false"
         @contact-panel-toggle="onToggleContactPanel"
       />
     </div>
     <div
-      v-if="!showInboxMessageView && !isOnExpandedLayout"
-      class="text-center bg-slate-25 dark:bg-slate-800 justify-center w-full h-full flex items-center"
+      v-if="!showInboxMessageView"
+      class="text-center bg-slate-25 dark:bg-slate-800 justify-center w-full h-full hidden md:flex items-center"
     >
       <span v-if="uiFlags.isFetching" class="spinner mt-4 mb-4" />
       <div v-else class="flex flex-col items-center gap-2">
@@ -51,8 +49,6 @@ import InboxList from './InboxList.vue';
 import InboxItemHeader from './components/InboxItemHeader.vue';
 import ConversationBox from 'dashboard/components/widgets/conversation/ConversationBox.vue';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
-import resizeListenerMixin from 'shared/mixins/resizeListenerMixin';
-import wootConstants from 'dashboard/constants/globals';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
@@ -63,7 +59,7 @@ export default {
     InboxItemHeader,
     ConversationBox,
   },
-  mixins: [uiSettingsMixin, resizeListenerMixin],
+  mixins: [uiSettingsMixin],
   props: {
     inboxId: {
       type: [String, Number],
@@ -74,11 +70,6 @@ export default {
       default: 0,
     },
   },
-  data() {
-    return {
-      isOnExpandedLayout: false,
-    };
-  },
   computed: {
     ...mapGetters({
       currentAccountId: 'getCurrentAccountId',
@@ -100,9 +91,6 @@ export default {
         FEATURE_FLAGS.INBOX_VIEW
       );
     },
-    showConversationList() {
-      return this.isOnExpandedLayout ? !this.notificationId : true;
-    },
     isFetchingInitialData() {
       return this.uiFlags.isFetching && !this.notifications.length;
     },
@@ -146,17 +134,8 @@ export default {
       });
     }
     this.$store.dispatch('agents/get');
-    this.handleResize();
   },
   methods: {
-    handleResize() {
-      const { SMALL_SCREEN_BREAKPOINT } = wootConstants;
-      if (window.innerWidth <= SMALL_SCREEN_BREAKPOINT) {
-        this.isOnExpandedLayout = true;
-      } else {
-        this.isOnExpandedLayout = false;
-      }
-    },
     async fetchConversationById() {
       if (!this.notificationId || !this.conversationId) return;
       this.$store.dispatch('clearSelectedState');

app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue

@@ -2,6 +2,16 @@
   <div
     class="flex gap-2 py-2 ltr:pl-4 rtl:pl-2 h-14 ltr:pr-2 rtl:pr-4 rtl:border-r justify-between items-center w-full border-b border-slate-50 dark:border-slate-800/50"
   >
+    <woot-button
+      variant="clear link"
+      class="flex md:hidden py-2"
+      size="medium"
+      color-scheme="primary"
+      icon="chevron-left"
+      @click="onClickGoToInboxList"
+    >
+      {{ $t('INBOX.ACTION_HEADER.BACK') }}
+    </woot-button>
     <pagination-button
       v-if="totalLength > 1"
       :total-length="totalLength"
@@ -16,6 +26,7 @@
         size="small"
         color-scheme="secondary"
         icon="snooze"
+        class="[&>span]:hidden md:[&>span]:inline-flex"
         @click="openSnoozeNotificationModal"
       >
         {{ $t('INBOX.ACTION_HEADER.SNOOZE') }}
@@ -25,6 +36,7 @@
         size="small"
         color-scheme="secondary"
         variant="hollow"
+        class="[&>span]:hidden md:[&>span]:inline-flex"
         @click="deleteNotification"
       >
         {{ $t('INBOX.ACTION_HEADER.DELETE') }}
@@ -140,6 +152,9 @@ export default {
     onClickPrev() {
       this.$emit('prev');
     },
+    onClickGoToInboxList() {
+      this.$router.push({ name: 'inbox_view' });
+    },
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue

@@ -19,7 +19,7 @@
       />
     </div>
     <div class="flex items-center gap-1 whitespace-nowrap">
-      <span class="text-sm font-medium text-gray-600">
+      <span class="text-sm font-medium text-gray-600 tabular-nums">
         {{ totalLength <= 1 ? '1' : currentIndex }}
       </span>
       <span
@@ -28,7 +28,7 @@
       >
         /
       </span>
-      <span v-if="totalLength > 1" class="text-sm text-slate-400">
+      <span v-if="totalLength > 1" class="text-sm text-slate-400 tabular-nums">
         {{ totalLength }}
       </span>
     </div>