fix: Show add/import/export buttons in mobile view (#9761)

app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue

@@ -3,7 +3,11 @@
     class="bg-white border-b dark:bg-slate-900 border-slate-50 dark:border-slate-800"
   >
     <div class="flex justify-between w-full px-4 py-2">
-      <div class="flex items-center justify-center max-w-full min-w-[6.25rem]">
+      <div class="flex flex-col items-center w-full gap-2 md:flex-row">
+        <div class="flex justify-between w-full gap-2">
+          <div
+            class="flex items-center justify-center max-w-full min-w-[6.25rem]"
+          >
             <woot-sidemenu-icon />
             <h1
               class="m-0 mx-2 my-0 overflow-hidden text-xl text-slate-900 dark:text-slate-100 whitespace-nowrap text-ellipsis"
@@ -11,9 +15,8 @@
               {{ headerTitle }}
             </h1>
           </div>
-      <div class="flex gap-2">
           <div
-          class="max-w-[400px] min-w-[150px] flex items-center relative mx-2 search-wrap"
+            class="max-w-[400px] min-w-[100px] flex items-center relative mx-2"
           >
             <div class="flex items-center absolute h-full left-2.5">
               <fluent-icon
@@ -24,23 +27,25 @@
             <input
               type="text"
               :placeholder="$t('CONTACTS_PAGE.SEARCH_INPUT_PLACEHOLDER')"
-            class="contact-search border-slate-100 dark:border-slate-600"
+              class="!pl-9 !pr-[3.75rem] !text-sm !w-full !h-[2.375rem] !m-0 border-slate-100 dark:border-slate-600"
               :value="searchQuery"
               @keyup.enter="submitSearch"
               @input="inputSearch"
             />
             <woot-button
               :is-loading="false"
-            class="clear"
+              class="absolute h-8 px-2 py-0 ml-2 transition-transform duration-100 ease-linear clear right-1"
               :class-names="searchButtonClass"
               @click="submitSearch"
             >
               {{ $t('CONTACTS_PAGE.SEARCH_BUTTON') }}
             </woot-button>
           </div>
+        </div>
+        <div class="flex gap-1">
           <div v-if="hasActiveSegments" class="flex gap-2">
             <woot-button
-            class="clear"
+              class="clear [&>span]:hidden xs:[&>span]:block"
               color-scheme="secondary"
               icon="edit"
               @click="onToggleEditSegmentsModal"
@@ -48,7 +53,7 @@
               {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_EDIT') }}
             </woot-button>
             <woot-button
-            class="clear"
+              class="clear [&>span]:hidden xs:[&>span]:block"
               color-scheme="alert"
               icon="delete"
               @click="onToggleDeleteSegmentsModal"
@@ -62,7 +67,7 @@
               class="absolute w-2 h-2 rounded-full top-1 right-3 bg-slate-500 dark:bg-slate-500"
             />
             <woot-button
-            class="clear"
+              class="clear [&>span]:hidden xs:[&>span]:block"
               color-scheme="secondary"
               data-testid="create-new-contact"
               icon="filter"
@@ -74,7 +79,7 @@
 
           <woot-button
             v-if="hasAppliedFilters && !hasActiveSegments"
-          class="clear"
+            class="clear [&>span]:hidden xs:[&>span]:block"
             color-scheme="alert"
             variant="clear"
             icon="save"
@@ -83,7 +88,7 @@
             {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_SAVE') }}
           </woot-button>
           <woot-button
-          class="clear"
+            class="clear [&>span]:hidden xs:[&>span]:block"
             color-scheme="success"
             icon="person-add"
             data-testid="create-new-contact"
@@ -96,7 +101,7 @@
             v-if="isAdmin"
             color-scheme="info"
             icon="upload"
-          class="clear"
+            class="clear [&>span]:hidden xs:[&>span]:block"
             @click="toggleImport"
           >
             {{ $t('IMPORT_CONTACTS.BUTTON_LABEL') }}
@@ -106,13 +111,14 @@
             v-if="isAdmin"
             color-scheme="info"
             icon="download"
-          class="clear"
+            class="clear [&>span]:hidden xs:[&>span]:block"
             @click="submitExport"
           >
             {{ $t('EXPORT_CONTACTS.BUTTON_LABEL') }}
           </woot-button>
         </div>
       </div>
+    </div>
     <woot-confirm-modal
       ref="confirmExportContactsDialog"
       :title="$t('EXPORT_CONTACTS.CONFIRM.TITLE')"
@@ -156,7 +162,9 @@ export default {
   },
   computed: {
     searchButtonClass() {
-      return this.searchQuery !== '' ? 'show' : '';
+      return this.searchQuery !== ''
+        ? 'opacity-100 translate-x-0 visible'
+        : '-translate-x-px opacity-0 invisible';
     },
     ...mapGetters({
       getAppliedContactFilters: 'contacts/getAppliedContactFilters',
@@ -209,20 +217,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.search-wrap {
-  .contact-search {
-    @apply pl-9 pr-[3.75rem] text-sm w-full h-[2.375rem] m-0;
-  }
-
-  .button {
-    transition: transform 100ms linear;
-    @apply ml-2 h-8 right-1 absolute py-0 px-2 opacity-0 -translate-x-px invisible;
-  }
-
-  .button.show {
-    @apply opacity-100 translate-x-0 visible;
-  }
-}
-</style>

tailwind.config.js

@@ -20,6 +20,14 @@ module.exports = {
         interDisplay: ['Inter Display', ...defaultTheme.fontFamily.sans],
       },
     },
+    screens: {
+      xs: '480px',
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+      '2xl': '1536px',
+    },
     fontSize: {
       ...defaultTheme.fontSize,
       xxs: '0.625rem',