bottomsheet improvements

src/components/MessageOperationsBottomSheet.vue

@@ -15,6 +15,16 @@
       :data-closed="closed ? 1 : 0"
     >
       <slot></slot>
+      <v-btn
+        fab
+        small
+        elevation="0"
+        color="black"
+        @click.stop="backgroundClick"
+        class="bottom-sheet-close"
+      >
+        <v-icon color="white">cancel</v-icon>
+      </v-btn>
     </SwipeableBottomSheet>
   </div>
 </template>
@@ -79,6 +89,12 @@ export default {
 }
 
 .message-operations-bottom-sheet {
+  .bottom-sheet-close {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+  }
+
   .transition-bg {
       position: absolute;
       top: 0;
@@ -86,6 +102,11 @@ export default {
       bottom: 0;
       right: 0;
       background-color: rgba(0, 0, 0, 0.15);
+
+      @media #{map-get($display-breakpoints, 'sm-and-down')} {
+        z-index: 10;
+      }
+
   }
   .pan-area {
     padding-bottom: 0px;
@@ -93,15 +114,19 @@ export default {
   .card {
     padding: 0px !important;
 
-    @media #{map-get($display-breakpoints, 'sm-and-up')} {
-      &[data-state="close"] {
-        display: none;
-      }
+    &[data-state="half"] {
+      top: 100px !important;
+      left: 50%;
+      transform: translate(-50%, 0);
 
-      &[data-state="half"] {
-        top: 394px !important;
+      @media #{map-get($display-breakpoints, 'lg-and-up')} {
+        width: $dialog-desktop-width;
       }
     }
+
+    &[data-state="close"] {
+      display: none;
+    }
   }
 }