From 22f1a708d3911661c6809aca05cb016496d2ec94 Mon Sep 17 00:00:00 2001
From: Nikita Konev <nikit.cpp@yandex.ru>
Date: Sun, 12 Jan 2025 07:55:37 +0300
Subject: [PATCH] Make paginated modals and ChatEditModal fullscreen on mobile

---
 frontend/src/App.vue                    | 22 ++++++++++++----------
 frontend/src/ChatEditModal.vue          |  2 +-
 frontend/src/ChatParticipantsModal.vue  |  2 +-
 frontend/src/FileListModal.vue          |  2 +-
 frontend/src/MessageEditMediaModal.vue  |  2 +-
 frontend/src/NotificationsModal.vue     |  2 +-
 frontend/src/PinnedMessagesModal.vue    |  2 +-
 frontend/src/PublishedMessagesModal.vue |  2 +-
 8 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 1a1583a8..6a445dbe 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -966,16 +966,6 @@ html {
   }
 }
 
-// to check those 2 bugs:
-// Open ChatEditModal of a chat with an avatar
-
-// reverts 3.7.4 https://github.com/vuetifyjs/vuetify/commit/42a12dd89da2e7e5ea5f6a3bc7611fb2e9f2563a#diff-0ca827fe1439dde86f60164ea243a0e4c495fa2e03606f4dd802703d1a0d30efR58
-.v-dialog--scrollable {
-  > .v-overlay__content {
-    max-height: calc(100% - 48px);
-  }
-}
-
 // reverts some changes from ~3.7.0 (from F12)
 .my-actions .v-btn ~ .v-btn:not(.v-btn-toggle .v-btn) {
   margin-inline-start: .5rem;
@@ -986,6 +976,18 @@ html {
 <style lang="stylus">
 @import "constants.styl"
 
+@media screen and (min-width: $mobileWidth) {
+  // to check those 2 bugs:
+  // Open ChatEditModal of a chat with an avatar
+  // reverts 3.7.4 https://github.com/vuetifyjs/vuetify/commit/42a12dd89da2e7e5ea5f6a3bc7611fb2e9f2563a#diff-0ca827fe1439dde86f60164ea243a0e4c495fa2e03606f4dd802703d1a0d30efR58
+  .v-dialog--scrollable {
+    > .v-overlay__content {
+      max-height: calc(100% - 48px);
+    }
+  }
+}
+
+
 .colored-link {
     color: $linkColor;
     text-decoration none
diff --git a/frontend/src/ChatEditModal.vue b/frontend/src/ChatEditModal.vue
index e62ee671..29d7fb9c 100644
--- a/frontend/src/ChatEditModal.vue
+++ b/frontend/src/ChatEditModal.vue
@@ -2,7 +2,7 @@
     <v-row justify="center">
         <input id="image-input-chat-avatar" type="file" style="display: none;" accept="image/*"/>
 
-        <v-dialog v-model="show" max-width="640" :persistent="isNew" scrollable>
+        <v-dialog v-model="show" max-width="640" :persistent="isNew" scrollable :fullscreen="isMobile()">
             <v-card :title="getTitle()">
                 <v-card-text :class="isMobile() ? ['ma-0', 'mx-2', 'pa-0', 'pt-2'] : ['ma-0', 'mx-4', 'pa-0', 'pt-2']">
                     <v-form
diff --git a/frontend/src/ChatParticipantsModal.vue b/frontend/src/ChatParticipantsModal.vue
index f12c8ffb..1edc5e10 100644
--- a/frontend/src/ChatParticipantsModal.vue
+++ b/frontend/src/ChatParticipantsModal.vue
@@ -1,6 +1,6 @@
 <template>
     <v-row justify="center">
-        <v-dialog v-model="show" max-width="740" scrollable :persistent="hasSearchString() || chatStore.showAlertDebounced">
+        <v-dialog v-model="show" max-width="740" scrollable :persistent="hasSearchString() || chatStore.showAlertDebounced" :fullscreen="isMobile()">
             <v-card>
                 <v-card-title class="d-flex align-center ml-2">
                     <template v-if="showSearchButton">
diff --git a/frontend/src/FileListModal.vue b/frontend/src/FileListModal.vue
index 6af51e19..c62199cc 100644
--- a/frontend/src/FileListModal.vue
+++ b/frontend/src/FileListModal.vue
@@ -1,6 +1,6 @@
 <template>
     <v-row justify="center">
-        <v-dialog v-model="show" max-width="800" height="100%" scrollable :persistent="hasSearchString()">
+        <v-dialog v-model="show" max-width="800" height="100%" scrollable :persistent="hasSearchString()" :fullscreen="isMobile()">
             <v-card>
                 <v-card-title class="d-flex align-center ml-2">
                     <template v-if="showSearchButton">
diff --git a/frontend/src/MessageEditMediaModal.vue b/frontend/src/MessageEditMediaModal.vue
index 373173ef..3953c31e 100644
--- a/frontend/src/MessageEditMediaModal.vue
+++ b/frontend/src/MessageEditMediaModal.vue
@@ -1,6 +1,6 @@
 <template>
     <v-row justify="center">
-        <v-dialog v-model="show" max-width="800" height="100%" scrollable>
+        <v-dialog v-model="show" max-width="800" height="100%" scrollable :fullscreen="isMobile()">
           <v-card :title="title()">
                 <v-card-text>
                     <v-row
diff --git a/frontend/src/NotificationsModal.vue b/frontend/src/NotificationsModal.vue
index dfb7cd94..21a35774 100644
--- a/frontend/src/NotificationsModal.vue
+++ b/frontend/src/NotificationsModal.vue
@@ -1,6 +1,6 @@
 <template>
     <v-row justify="center">
-        <v-dialog v-model="show" max-width="640" scrollable>
+        <v-dialog v-model="show" max-width="640" scrollable :fullscreen="isMobile()">
             <v-card>
                 <v-card-title class="d-flex align-center ml-2 mt-2">
                     {{ $vuetify.locale.t('$vuetify.notifications') }}
diff --git a/frontend/src/PinnedMessagesModal.vue b/frontend/src/PinnedMessagesModal.vue
index 935a62cf..252d5fa0 100644
--- a/frontend/src/PinnedMessagesModal.vue
+++ b/frontend/src/PinnedMessagesModal.vue
@@ -1,6 +1,6 @@
 <template>
     <v-row justify="center">
-        <v-dialog v-model="show" max-width="640" scrollable>
+        <v-dialog v-model="show" max-width="640" scrollable :fullscreen="isMobile()">
             <v-card :title="$vuetify.locale.t('$vuetify.pinned_messages_full')">
                 <v-card-text class="ma-0 pa-0">
                     <v-list class="pb-0" v-if="!loading">
diff --git a/frontend/src/PublishedMessagesModal.vue b/frontend/src/PublishedMessagesModal.vue
index 27f28bea..9668ac53 100644
--- a/frontend/src/PublishedMessagesModal.vue
+++ b/frontend/src/PublishedMessagesModal.vue
@@ -1,6 +1,6 @@
 <template>
     <v-row justify="center">
-        <v-dialog v-model="show" max-width="640" scrollable>
+        <v-dialog v-model="show" max-width="640" scrollable :fullscreen="isMobile()">
             <v-card :title="$vuetify.locale.t('$vuetify.published_messages_full')">
                 <v-card-text class="ma-0 pa-0">
                     <v-list class="pb-0" v-if="!loading">