Merge branch '161-desktop-constrain-width' into 'main'

Desktop width constrain

Closes #161

See merge request keanuapp/keanuapp-weblite!17

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>

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>

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>

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>

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"