Desktop width constrain

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>

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;

src/assets/css/chat.scss

@@ -957,6 +957,8 @@ $admin-fg: white;
 }
 
 .create-room {
+    background-color: $background;
+
     .v-avatar {
         border: 1px solid #808080 !important;
     }

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;
 }

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; }
 

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>