wip

Author: jjaffeux

app/assets/stylesheets/common/float-kit/bottom-sheet.scss

@@ -1,50 +1,50 @@
-.bottom-sheet {
-  [data-d-sheet~="view"] {
-    z-index: 9999;
-  }
-
-  :where(&__content) {
-    box-sizing: border-box;
-    height: auto;
-    max-width: 700px;
-    padding-bottom: max(
-      calc(env(safe-area-inset-bottom, 0px) + 12px),
-      var(--space-5)
-    );
-    display: grid;
-    justify-items: center;
-  }
-
-  :where(&__bleeding-background) {
-    border-radius: var(--d-border-radius-large);
-    background-color: var(--secondary);
-    box-shadow:
-      0 10px 15px -3px rgb(0 0 0 / 10%),
-      0 4px 6px -4px rgb(0 0 0 / 10%);
-  }
+.bottom-sheet__view {
+  height: calc(max(100dvh, 100lvh) + 60px);
+}
 
-  :where(&__view) {
-    top: 0;
-    bottom: initial;
-    height: calc(max(100dvh, 100lvh) + 60px);
-  }
+.bottom-sheet__content {
+  box-sizing: border-box;
+  height: auto;
+  min-height: 100px;
+  max-width: 700px;
+  padding-bottom: max(
+    calc(env(safe-area-inset-bottom, 0px) + 12px),
+    var(--space-5)
+  );
+  display: grid;
+  justify-items: center;
 
-  :where(&__content).--expandable {
+  &.--expandable {
     height: calc(100% - max(env(safe-area-inset-top), var(--space-1)));
     overflow: hidden;
     grid-template-rows: auto 1fr;
   }
+}
 
-  :where(&__scroll-view) {
-    width: 100%;
-    min-height: 0;
-  }
+.bottom-sheet__bleeding-background {
+  border-radius: var(--d-border-radius-large);
+  background-color: var(--secondary);
+  box-shadow: var(--shadow-card);
+}
 
-  :where(&__input) {
-    box-sizing: border-box;
-    width: 100%;
-    height: 35px;
-    padding-inline: var(--space-4);
-    margin-bottom: var(--space-4);
-  }
+.bottom-sheet__handle {
+  width: 50px;
+  height: 6px;
+  border: 0;
+  border-radius: 9999px;
+  background-color: var(--primary-low-mid);
+  cursor: pointer;
+}
+
+.bottom-sheet__scroll-view {
+  width: 100%;
+  min-height: 0;
+}
+
+.bottom-sheet__input {
+  box-sizing: border-box;
+  width: 100%;
+  height: 35px;
+  padding-inline: var(--space-4);
+  margin-bottom: var(--space-4);
 }

app/assets/stylesheets/common/float-kit/d-sheet.scss

@@ -143,6 +143,8 @@
 }
 
 [data-d-sheet~="view"] {
+  z-index: z("modal", "overlay");
+
   --d-sheet-minimum-snap-distance: var(
     --d-sheet-minimum-snap-distance-from-props,
     1px

frontend/discourse/float-kit/components/d-bottom-sheet.gjs

@@ -123,7 +123,7 @@ const BottomSheetContent = <template>
         </BottomSheetInnerContent>
       </ExpandableView>
     {{else}}
-      <DSheet.View @sheet={{@sheet}}>
+      <DSheet.View class="bottom-sheet__view" @sheet={{@sheet}}>
         <BottomSheetInnerContent
           @sheet={{@sheet}}
           @expandable={{false}}