fix: make it mobile responsive

AchoArnold · AchoArnold · commit b59d245f9bc6 · 2026-06-24T20:54:01.000+03:00
diff --git a/web/app/components/MessageThread.vue b/web/app/components/MessageThread.vue
@@ -97,9 +97,9 @@ function onInstallApp() {
       </v-btn>
     </div>
     <v-list
-      class="pt-0"
-      lines="two"
+      class="py-0"
       v-if="!threadsStore.loadingThreads && threadsStore.threads.length > 0"
+      lines="two"
     >
       <v-list-item
         v-for="thread in threadsStore.threads"
diff --git a/web/app/components/MessageThreadHeader.vue b/web/app/components/MessageThreadHeader.vue
@@ -142,7 +142,7 @@ async function logout() {
     <v-spacer />
     <v-menu>
       <template #activator="{ props: menuProps }">
-        <v-btn v-bind="menuProps" icon variant="text" class="mt-2">
+        <v-btn v-bind="menuProps" icon variant="text" class="mt-2 mr-n3">
           <v-icon :icon="mdiDotsVertical" />
         </v-btn>
       </template>
diff --git a/web/app/pages/billing/index.vue b/web/app/pages/billing/index.vue
@@ -27,7 +27,7 @@ useHead({
 })
 
 const config = useRuntimeConfig()
-const { mdAndDown, lgAndUp } = useDisplay()
+const { lgAndUp } = useDisplay()
 const authStore = useAuthStore()
 const billingStore = useBillingStore()
 const notificationsStore = useNotificationsStore()
@@ -248,7 +248,7 @@ onMounted(async () => {
 <template>
   <VContainer fluid class="px-0 pt-0" :class="{ 'fill-height': lgAndUp }">
     <div class="w-100 h-100">
-      <VAppBar height="60" :density="mdAndDown ? 'compact' : 'default'">
+      <VAppBar>
         <VBtn icon to="/threads">
           <VIcon :icon="mdiArrowLeft" />
         </VBtn>
diff --git a/web/app/pages/bulk-messages/index.vue b/web/app/pages/bulk-messages/index.vue
@@ -14,7 +14,7 @@ useHead({
 })
 
 const router = useRouter()
-const { mdAndUp, mdAndDown } = useDisplay()
+const { mdAndUp } = useDisplay()
 const authStore = useAuthStore()
 const notificationsStore = useNotificationsStore()
 const { formatTimestamp } = useFilters()
@@ -111,7 +111,7 @@ onMounted(async () => {
 <template>
   <VContainer fluid class="px-0 pt-0" :class="{ 'fill-height': true }">
     <div class="w-100 h-100">
-      <VAppBar height="60" :density="mdAndDown ? 'compact' : 'default'">
+      <VAppBar>
         <VBtn icon to="/threads">
           <VIcon :icon="mdiArrowLeft" />
         </VBtn>
diff --git a/web/app/pages/messages/index.vue b/web/app/pages/messages/index.vue
@@ -17,7 +17,7 @@ useHead({
 })
 
 const router = useRouter()
-const { mdAndDown } = useDisplay()
+const { mdAndDown, mdAndUp } = useDisplay()
 const notificationsStore = useNotificationsStore()
 const phonesStore = usePhonesStore()
 const { useApi } = useApiComposable()
@@ -109,15 +109,15 @@ onMounted(async () => {
 </script>
 
 <template>
-  <VContainer fluid class="pa-0" :class="{ 'fill-height': true }">
+  <VContainer fluid :class="{ 'fill-height': true }">
     <div class="w-100 h-100">
-      <VAppBar height="60" :density="mdAndDown ? 'compact' : 'default'">
+      <VAppBar>
         <VBtn icon to="/threads">
           <VIcon :icon="mdiArrowLeft" />
         </VBtn>
         <VToolbarTitle>
           New Message
-          <template v-if="phonesStore.owner">
+          <template v-if="phonesStore.owner && mdAndUp">
             <VIcon size="12" class="mx-2" color="primary" :icon="mdiCircle" />
             {{ formatPhoneNumber(phonesStore.owner) }}
           </template>
diff --git a/web/app/pages/phone-api-keys/index.vue b/web/app/pages/phone-api-keys/index.vue
@@ -16,7 +16,7 @@ useHead({
 })
 
 const config = useRuntimeConfig()
-const { mdAndDown, lgAndUp } = useDisplay()
+const { lgAndUp } = useDisplay()
 const authStore = useAuthStore()
 const appStore = useAppStore()
 const phonesStore = usePhonesStore()
@@ -228,11 +228,11 @@ onBeforeUnmount(() => {
 <template>
   <VContainer fluid class="px-0 pt-0" :class="{ 'fill-height': lgAndUp }">
     <div class="w-100 h-100">
-      <VAppBar height="60" :density="mdAndDown ? 'compact' : 'default'">
+      <VAppBar>
         <VBtn icon to="/threads">
           <VIcon :icon="mdiArrowLeft" />
         </VBtn>
-        <VToolbarTitle> Phone API Keys </VToolbarTitle>
+        <VToolbarTitle>Phone API Keys</VToolbarTitle>
         <VProgressLinear
           color="primary"
           :active="loading"
@@ -253,7 +253,9 @@ onBeforeUnmount(() => {
                 class="mt-1 mr-2"
                 indeterminate
               />
-              <h5 class="text-display-small my-0">Phone API Keys</h5>
+              <h5 class="text-md-display-small text-title-large my-0">
+                Phone API Keys
+              </h5>
               <VBtn
                 color="primary"
                 class="ml-4 mt-1"
diff --git a/web/app/pages/search-messages/index.vue b/web/app/pages/search-messages/index.vue
@@ -42,7 +42,7 @@ useHead({
 
 const route = useRoute()
 const config = useRuntimeConfig()
-const { mdAndDown, mdAndUp, smAndDown, lgAndUp } = useDisplay()
+const { mdAndUp, smAndDown, lgAndUp } = useDisplay()
 const messagesStore = useMessagesStore()
 const phonesStore = usePhonesStore()
 const authStore = useAuthStore()
@@ -349,7 +349,7 @@ onBeforeUnmount(() => {
 <template>
   <VContainer fluid class="px-0 pt-0" :class="{ 'fill-height': lgAndUp }">
     <div class="w-100 h-100">
-      <VAppBar height="60" :density="mdAndDown ? 'compact' : 'default'">
+      <VAppBar>
         <VBtn icon to="/threads">
           <VIcon :icon="mdiArrowLeft" />
         </VBtn>
diff --git a/web/app/pages/settings/index.vue b/web/app/pages/settings/index.vue
@@ -769,9 +769,9 @@ onMounted(async () => {
 </script>
 
 <template>
-  <VContainer fluid class="pa-0" :class="{ 'fill-height': lgAndUp }">
+  <VContainer fluid :class="{ 'fill-height': lgAndUp }">
     <div class="w-100 h-100">
-      <VAppBar height="60" :density="mdAndDown ? 'compact' : 'default'">
+      <VAppBar>
         <VBtn icon to="/threads">
           <VIcon :icon="mdiArrowLeft" />
         </VBtn>
diff --git a/web/app/pages/threads/[id]/index.vue b/web/app/pages/threads/[id]/index.vue
@@ -244,18 +244,15 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <VContainer fluid class="px-0 pt-0 pb-0" :class="{ 'fill-height': lgAndUp }">
-    <div class="w-100 h-100">
-      <VAppBar height="60" :density="mdAndDown ? 'compact' : 'default'">
+  <VContainer class="px-0" :class="{ 'fill-height': lgAndUp }">
+    <div class="h-100">
+      <VAppBar>
         <VBtn v-if="mdAndDown" icon to="/threads">
           <VIcon :icon="mdiArrowLeft" />
         </VBtn>
-        <VToolbarTitle>
-          <span v-if="threadsStore.currentThread">
-            {{ formatPhoneNumber(threadsStore.currentThread.contact) }}
-          </span>
+        <VToolbarTitle v-if="threadsStore.currentThread">
+          {{ formatPhoneNumber(threadsStore.currentThread.contact) }}
         </VToolbarTitle>
-        <VSpacer />
         <VMenu>
           <template #activator="{ props }">
             <VBtn icon variant="text" class="mt-2" v-bind="props">
@@ -558,7 +555,7 @@ onBeforeUnmount(() => {
   padding-top: 50px;
   max-height: calc(100vh - 200px);
   position: absolute;
-  width: 100%;
+  width: calc(100vw - 8px);
   bottom: 120px;
 }
 
diff --git a/web/app/pages/threads/index.vue b/web/app/pages/threads/index.vue
@@ -20,7 +20,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <VContainer fluid :class="{ 'fill-height': lgAndUp }">
+  <VContainer class="pa-0" fluid :class="{ 'fill-height': lgAndUp }">
     <VRow
       v-if="lgAndUp"
       align="center"
