TootComposer: stops propagation of touch and wheel

src/material/BottomSheet.css

@@ -17,7 +17,10 @@
 
 
   &::backdrop {
-    background: none;
+    background: transparent;
+
+    transition: background-color 120ms var(--tutu-anim-curve-std);
+    transition-behavior: allow-discrete;
   }
 
   box-shadow: var(--tutu-shadow-e16);
@@ -53,7 +56,7 @@
   }
 
   &.animated {
-    position: absolute;
+    position: fixed;
     overflow: hidden;
     will-change: width, height, top, left;
 
@@ -66,16 +69,25 @@
     top: unset;
     transform: translateX(-50%);
     bottom: 0;
-    content: content;
+    height: auto;
-    height: unset;
     contain: content;
     contain-intrinsic-size: unset;
 
+    &[open]::backdrop {
+      background: var(--tutu-color-shadow-l1);
+    }
+
     @media (max-width: 560px) {
       & {
         transform: none;
-        height: unset;
+        height: auto;
       }
     }
   }
-}
+}
+
+@starting-style {
+  .BottomSheet::backdrop {
+    background: transparent;
+  }
+}

src/material/BottomSheet.tsx

@@ -4,6 +4,7 @@ import {
   createSignal,
   onCleanup,
   useTransition,
+  type JSX,
   type ParentComponent,
   type ResolvedChildren,
 } from "solid-js";
@@ -14,6 +15,7 @@ import material from "./material.module.css";
 export type BottomSheetProps = {
   open?: boolean;
   bottomUp?: boolean;
+  class?: JSX.HTMLAttributes<HTMLElement>["class"];
   onClose?(reason: "backdrop"): void;
 };
 
@@ -219,10 +221,8 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
 
   return (
     <dialog
-      class={`BottomSheet ${material.surface}`}
+      class={`BottomSheet ${material.surface} ${props.class || ""}`}
       classList={{
-        ["BottomSheet"]: true,
-        [material.surface]: true,
         ["bottom"]: props.bottomUp,
       }}
       onClick={onDialogClick}

src/timelines/TootComposer.tsx

@@ -42,11 +42,13 @@ import { useLanguage } from "../platform/i18n";
 import iso639_1 from "iso-639-1";
 import ChooseTootLang from "./ChooseTootLang";
 import type { mastodon } from "masto";
+import cardStyles from "../material/cards.module.css";
 
 type TootVisibility = "public" | "unlisted" | "private" | "direct";
 
 const TootVisibilityPickerDialog: Component<{
   open?: boolean;
+  class?: string;
   onClose: () => void;
   visibility: TootVisibility;
   onVisibilityChange: (value: TootVisibility) => void;
@@ -76,7 +78,12 @@ const TootVisibilityPickerDialog: Component<{
   };
 
   return (
-    <BottomSheet open={props.open} onClose={props.onClose} bottomUp>
+    <BottomSheet
+      open={props.open}
+      onClose={props.onClose}
+      bottomUp
+      class={props.class}
+    >
       <Scaffold
         bottom={
           <div
@@ -163,12 +170,13 @@ const TootVisibilityPickerDialog: Component<{
 
 const TootLanguagePickerDialog: Component<{
   open?: boolean;
+  class?: string;
   onClose: () => void;
   code: string;
   onCodeChange: (nval: string) => void;
 }> = (props) => {
   return (
-    <BottomSheet open={props.open} onClose={props.onClose}>
+    <BottomSheet open={props.open} onClose={props.onClose} class={props.class}>
       <Show when={props.open}>
         <ChooseTootLang
           code={props.code}
@@ -188,6 +196,10 @@ function randomChoose<T extends any[]>(
   return K[idx];
 }
 
+function cancelEvent(event: Event) {
+  event.stopPropagation();
+}
+
 const TootComposer: Component<{
   ref?: Ref<HTMLDivElement>;
   style?: JSX.CSSProperties;
@@ -301,7 +313,15 @@ const TootComposer: Component<{
       ref={props.ref}
       class={tootComposers.composer}
       style={containerStyle()}
-      onClick={(e) => inputRef.focus()}
+      onClick={() => {
+        inputRef.focus();
+      }}
+      on:touchend={
+        cancelEvent
+        /* on: is required to register the event handler on the exact element */
+      }
+      on:touchmove={cancelEvent}
+      on:wheel={cancelEvent}
     >
       <div class={tootComposers.replyInput}>
         <Show when={props.profile}>
@@ -365,6 +385,7 @@ const TootComposer: Component<{
         </div>
 
         <TootVisibilityPickerDialog
+          class={cardStyles.cardNoPad}
           open={permPicker()}
           onClose={() => setPermPicker(false)}
           visibility={visibility()}
@@ -372,6 +393,7 @@ const TootComposer: Component<{
         />
 
         <TootLanguagePickerDialog
+          class={cardStyles.cardNoPad}
           open={langPickerOpen()}
           onClose={() => setLangPickerOpen(false)}
           code={language()}