From 62652e20a4c2b31a69854dfc6a7ab2fa979aba7e Mon Sep 17 00:00:00 2001
From: Tenzin Passang <tenzinpassang@Tenzins-Air.lan>
Date: Tue, 16 Nov 2021 21:26:00 +0200
Subject: [PATCH 1/2] Desktop width constrain

---
 src/App.vue                         | 16 +++++++++++++++-
 src/assets/css/_variables.scss      | 12 ++++++++++++
 src/assets/css/chat.scss            |  2 ++
 src/assets/css/join.scss            |  4 ++--
 src/assets/css/login.scss           | 11 +----------
 src/assets/css/main.scss            | 16 ++++------------
 src/components/BottomSheet.vue      | 14 ++++++++++++++
 src/components/CreateRoom.vue       |  2 +-
 src/components/Login.vue            |  2 +-
 src/components/ProfileInfoPopup.vue | 21 ++++++++++++++++++++-
 10 files changed, 72 insertions(+), 28 deletions(-)
 create mode 100644 src/assets/css/_variables.scss

diff --git a/src/App.vue b/src/App.vue
index cb470ca..5fbf16a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <v-app>
-    <v-main>
+    <v-main class="main">
       <router-view />
 
       <!-- Loading indicator -->
@@ -154,7 +154,21 @@ export default {
 </script>
 
 <style lang="scss">
+@import '~vuetify/src/styles/settings/_variables.scss';
+@import '@/assets/css/variables';
+
 .copyright {
   font-size: 10px;
 }
+
+#app {
+  background-color: $app-background;
+}
+
+.main {
+  @media #{map-get($display-breakpoints, 'lg-and-up')} {
+    margin: 0 auto;
+    width: $main-desktop-width;;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/assets/css/_variables.scss b/src/assets/css/_variables.scss
new file mode 100644
index 0000000..9b6a0be
--- /dev/null
+++ b/src/assets/css/_variables.scss
@@ -0,0 +1,12 @@
+$background: #ffffff;
+$app-background: #f6f6f6;
+$main-desktop-width: 644px;
+$dialog-desktop-width: 688px;
+
+
+$chat-background: $background;
+$chat-standard-padding: 32px;
+$chat-standard-padding-s: 16px;
+$chat-standard-padding-xs: 8px;
+$chat-text-size: 1.0px;
+$chat-button-height: 50px;
diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 8af58d5..75197a3 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -957,6 +957,8 @@ $admin-fg: white;
 }
 
 .create-room {
+    background-color: $background;
+
     .v-avatar {
         border: 1px solid #808080 !important;
     }
diff --git a/src/assets/css/join.scss b/src/assets/css/join.scss
index a52ebc6..93618f1 100644
--- a/src/assets/css/join.scss
+++ b/src/assets/css/join.scss
@@ -62,7 +62,7 @@
     /* or 43px */
     text-align: center;
     letter-spacing: -0.8px;
-    
+
     color: #000000;
     overflow-wrap: break-word;
 }
@@ -118,4 +118,4 @@
         background: #9C9CAE;
         content: " ";
     }
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/login.scss b/src/assets/css/login.scss
index 3df951c..c8d2cfd 100644
--- a/src/assets/css/login.scss
+++ b/src/assets/css/login.scss
@@ -1,14 +1,5 @@
 @import "@/assets/css/main.scss";
 
 .login-root {
-    position: absolute;
-    left: 0px;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    width: 80%;
-    height: 100%;
-    padding: 0;
-    margin: 10%;
     background-color: $background;
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index cef60c2..26c1aa2 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -1,4 +1,4 @@
-$background: #ffffff;
+@import './variables';
 
 @font-face {
     font-family: "Inter";
@@ -49,14 +49,6 @@ $background: #ffffff;
     font-style: normal;
 }
 
-
-$chat-background: $background;
-$chat-standard-padding: 32px;
-$chat-standard-padding-s: 16px;
-$chat-standard-padding-xs: 8px;
-$chat-text-size: 1.0px;
-$chat-button-height: 50px;
-
 html { height:100%; }
 body { position:absolute; top:0; bottom:0; right:0; left:0; }
 
@@ -142,7 +134,7 @@ body { position:absolute; top:0; bottom:0; right:0; left:0; }
         text-align: center;
         margin-bottom: 20px;
     }
-    
+
     .dialog-text {
         text-align: left;
         word-break: break-word;
@@ -150,7 +142,7 @@ body { position:absolute; top:0; bottom:0; right:0; left:0; }
             color: black;
             text-decoration: underline;
         }
-    }    
+    }
 }
 
 .build-version {
@@ -162,4 +154,4 @@ body { position:absolute; top:0; bottom:0; right:0; left:0; }
     text-align: center;
     letter-spacing: 0.4px;
     color: rgba(0, 0, 0, 0.6);
-}
\ No newline at end of file
+}
diff --git a/src/components/BottomSheet.vue b/src/components/BottomSheet.vue
index 84fabd3..8fa1393 100644
--- a/src/components/BottomSheet.vue
+++ b/src/components/BottomSheet.vue
@@ -141,6 +141,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '~vuetify/src/styles/settings/_variables.scss';
+@import '@/assets/css/variables';
+
 .bottom-sheet {
   position: fixed;
   top: 0;
@@ -184,6 +187,11 @@ export default {
   border-radius: 10px 10px 0px 0px;
   background-color: white;
   overflow: hidden;
+
+  @media #{map-get($display-breakpoints, 'lg-and-up')} {
+    margin: 0 auto;
+    width: $dialog-desktop-width;
+  }
 }
 
 .bottom-sheet-content[data-state="small"],
@@ -191,4 +199,10 @@ export default {
 .bottom-sheet-content[data-state="closed"] {
   transition: top 0.3s ease-out;
 }
+
+.bottom-sheet-content[data-state="small"] {
+  @media #{map-get($display-breakpoints, 'lg-and-up')} {
+    top: 100px !important;
+  }
+}
 </style>
diff --git a/src/components/CreateRoom.vue b/src/components/CreateRoom.vue
index 5dd079e..e2d812c 100644
--- a/src/components/CreateRoom.vue
+++ b/src/components/CreateRoom.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="create-room">
+  <div class="create-room fill-height">
     <div>
       <v-container fluid>
         <div class="room-name no-upper">{{ $t("new_room.new_room") }}</div>
diff --git a/src/components/Login.vue b/src/components/Login.vue
index 7389fec..ae6e548 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="pa-4">
+  <div class="pa-4 login-root fill-height">
     <div class="chat-header">
       <v-container fluid>
         <v-row no-gutters>
diff --git a/src/components/ProfileInfoPopup.vue b/src/components/ProfileInfoPopup.vue
index 416da5c..2b690ec 100644
--- a/src/components/ProfileInfoPopup.vue
+++ b/src/components/ProfileInfoPopup.vue
@@ -3,7 +3,7 @@
     v-model="showDialog"
     content-class="profile-info-popup"
     class="ma-0 pa-0"
-    :width="$vuetify.breakpoint.smAndUp ? '60%' : '95%'"
+    :width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'"
   >
     <v-card flat>
       <v-card-text>
@@ -135,6 +135,8 @@ export default {
 
 <style lang="scss">
 @import "@/assets/css/chat.scss";
+@import '~vuetify/src/styles/settings/_variables.scss';
+
 .profile-info-popup {
   font-family: "Inter", sans-serif !important;
   font-size: 16px;
@@ -181,5 +183,22 @@ export default {
       font-size: 13 * $chat-text-size !important;
     }
   }
+  @media #{map-get($display-breakpoints, 'lg-and-up')} {
+    overflow: unset;
+    width: $main-desktop-width;;
+    position: absolute;
+    top: 70px;
+    right: unset;
+
+    &::before {
+      position: absolute;
+      top: -18px;
+      right: 40px;
+    }
+
+    .v-card {
+      border-radius: 20px;
+    }
+  }
 }
 </style>
\ No newline at end of file

From 6317a9a44d86b115360a160b840294c3788ef523 Mon Sep 17 00:00:00 2001
From: Tenzin Passang <tenzinpassang@Tenzins-Air.lan>
Date: Tue, 16 Nov 2021 22:11:52 +0200
Subject: [PATCH 2/2] Desktop language dialog width fixes

---
 src/components/SelectLanguageDialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SelectLanguageDialog.vue b/src/components/SelectLanguageDialog.vue
index 422b6fb..1ac5a00 100644
--- a/src/components/SelectLanguageDialog.vue
+++ b/src/components/SelectLanguageDialog.vue
@@ -1,9 +1,9 @@
 <template>
   <v-dialog
     class="ma-0 pa-0"
-    width="80%"
     v-bind="{ ...$props, ...$attrs }"
     v-on="$listeners"
+    :width="$vuetify.breakpoint.smAndUp ? '688px' : '80%'"
   >
     <v-card class="dialog-card">
       <v-card-title class="dialog-title"