Desktop width constrain

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>