Desktop width constrain

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>