fix: make pages mobile responsive

AchoArnold · AchoArnold · commit a6644dadded1 · 2026-06-24T21:34:58.000+03:00
diff --git a/web/app/pages/search-messages/index.vue b/web/app/pages/search-messages/index.vue
@@ -382,7 +382,7 @@ onBeforeUnmount(() => {
           </VCol>
         </VRow>
         <VCard>
-          <VCardText class="pt-4 pb-0">
+          <VCardText class="pt-4" :class="{ 'pb-0': mdAndUp }">
             <VRow>
               <VCol cols="12" md="4">
                 <VSelect
@@ -445,6 +445,7 @@ onBeforeUnmount(() => {
                   :disabled="loading"
                   color="primary"
                   class="py-5"
+                  :block="!mdAndUp"
                   @click="fetchMessages(true)"
                 >
                   <VIcon v-if="mdAndUp" start :icon="mdiMagnify" />
@@ -456,8 +457,10 @@ onBeforeUnmount(() => {
           </VCardText>
         </VCard>
         <VRow>
-          <VCol cols="12" class="mt-16 mb-n2 d-flex align-baseline">
-            <h2 class="text-headline-large mb-0">Search Results</h2>
+          <VCol cols="12" class="mt-16 mb-n2 d-flex align-center">
+            <h2 class="text-md-headline-large text-headline-medium mb-0 mt-0">
+              Search Results
+            </h2>
             <VDialog v-model="showDeleteDialog" opacity="0.9" max-width="550">
               <template #activator="{ props }">
                 <VBtn
@@ -504,7 +507,7 @@ onBeforeUnmount(() => {
                   :loading="loading"
                   :disabled="loading || !canResendSelected"
                   size="small"
-                  class="ml-2 mt-2 d-none d-md-inline-flex"
+                  class="ml-2 d-none d-md-inline-flex"
                   v-bind="props"
                 >
                   <VIcon start :icon="mdiRefresh" />
@@ -542,7 +545,6 @@ onBeforeUnmount(() => {
               :disabled="loading || selectedMessages.length < 1"
               size="small"
               color="primary"
-              class="mt-2"
               @click="exportMessages"
             >
               <VIcon v-if="mdAndUp" start :icon="mdiExport" />
diff --git a/web/app/pages/threads/[id]/index.vue b/web/app/pages/threads/[id]/index.vue
@@ -31,7 +31,7 @@ useHead({
 const route = useRoute()
 const router = useRouter()
 const config = useRuntimeConfig()
-const { lgAndUp, mdAndDown } = useDisplay()
+const { lgAndUp, mdAndDown, mdAndUp } = useDisplay()
 const { formatPhoneNumber } = useFilters()
 const notificationsStore = useNotificationsStore()
 const authStore = useAuthStore()
@@ -306,11 +306,11 @@ onBeforeUnmount(() => {
         color="primary"
         indeterminate
       />
-      <VContainer v-if="threadsStore.currentThread">
+      <VContainer class="pa-0" v-if="threadsStore.currentThread">
         <div
           ref="messageBody"
-          class="messages-body no-scrollbar"
-          :class="{ 'pr-7 pl-3': lgAndUp }"
+          class="messages-body no-scrollbar w-100 pl-2"
+          :class="{ 'pr-7': lgAndUp }"
         >
           <VRow
             v-for="message in messages"
@@ -320,14 +320,18 @@ onBeforeUnmount(() => {
             <VCol
               class="d-flex"
               :class="{
-                'pr-12': mdAndDown && !isMT(message),
-                'pl-12 pr-8': mdAndDown && isMT(message),
+                'pr-10': mdAndDown && !isMT(message),
+                'pl-12 pr-4': mdAndDown && isMT(message),
                 'pl-16 ml-16': lgAndUp && isMT(message),
                 'pr-16 mr-16': lgAndUp && !isMT(message),
               }"
             >
               <VSpacer v-if="isMT(message)" />
               <v-avatar
+                :class="{
+                  'ml-2': !mdAndUp,
+                  'ml-4': mdAndUp,
+                }"
                 v-if="isMo(message)"
                 :color="threadsStore.currentThread!.color"
                 size="40"
@@ -508,14 +512,13 @@ onBeforeUnmount(() => {
             </VCol>
           </VRow>
         </div>
-        <VFooter app color="#121212">
-          <VContainer class="pb-0">
+        <VFooter app class="py-0" color="#121212">
+          <VContainer class="pb-0 pt-0">
             <VForm ref="form" class="d-flex" @submit.prevent="sendMessage">
               <VTextField
                 v-model="formMessage"
                 :disabled="submitting || !contactIsPhoneNumber"
                 variant="solo"
-                class="no-scrollbar ml-2"
                 :rules="formMessageRules"
                 :placeholder="
                   contactIsPhoneNumber
@@ -553,10 +556,10 @@ onBeforeUnmount(() => {
 <style lang="scss">
 .messages-body {
   padding-top: 50px;
-  max-height: calc(100vh - 200px);
+  max-height: calc(100vh - 170px);
   position: absolute;
   width: calc(100vw - 8px);
-  bottom: 120px;
+  bottom: 94px;
 }
 
 @media (min-width: 960px) {
@@ -569,14 +572,20 @@ onBeforeUnmount(() => {
     max-width: 1185px;
   }
 }
-@media (min-width: 1920px) {
+
+@media (min-width: 1545px) {
+  .messages-body {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 2138px) {
   .messages-body {
-    max-width: 1785px;
+    max-width: 2000px;
   }
 }
 
-.no-scrollbar,
-.no-scrollbar textarea {
+.no-scrollbar {
   overflow-x: hidden;
   -ms-overflow-style: none;
   overflow-y: scroll;
