src/material/BottomSheet.tsx

@@ -209,13 +209,13 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   const onDialogClick = (
     event: MouseEvent & { currentTarget: HTMLDialogElement },
   ) => {
-    if (event.target !== event.currentTarget) return;
     const rect = event.currentTarget.getBoundingClientRect();
-    const isNotInDialog = event.clientY < rect.top ||
+    const isInDialog =
-      event.clientY > (rect.bottom) ||
+      rect.top <= event.clientY &&
-      event.clientX < rect.left ||
+      event.clientY <= rect.top + rect.height &&
-      event.clientX > rect.right;
+      rect.left <= event.clientX &&
-    if (isNotInDialog) {
+      event.clientX <= rect.left + rect.width;
+    if (!isInDialog) {
       props.onClose?.("backdrop");
     }
   };

src/settings/Settings.tsx

@@ -3,7 +3,6 @@ import {
   createSignal,
   For,
   Show,
-  type JSX,
   type ParentComponent,
 } from "solid-js";
 import Scaffold from "../material/Scaffold.js";
@@ -18,7 +17,6 @@ import {
   ListItemSecondaryAction,
   ListItemText,
   ListSubheader,
-  NativeSelect,
   Switch,
   Toolbar,
 } from "@suid/material";
@@ -48,96 +46,6 @@ import BottomSheet from "../material/BottomSheet.jsx";
 import { useServiceWorker } from "../platform/host.js";
 import { useSessions } from "../masto/clients.js";
 
-type Inset = {
-  top?: number;
-  right?: number;
-  bottom?: number;
-  left?: number;
-};
-
-type SafeAreaInsets = {
-  landscape: Inset;
-  protrait: Inset;
-};
-
-const safeAreaInsets: Record<string, SafeAreaInsets> = {
-  iphone15: {
-    protrait: {
-      top: 59,
-      bottom: 34,
-    },
-    landscape: {
-      bottom: 21,
-      left: 59,
-      right: 59,
-    },
-  },
-  iphone12: {
-    protrait: {
-      top: 47,
-      bottom: 34,
-    },
-    landscape: {
-      bottom: 21,
-      left: 47,
-      right: 47,
-    },
-  },
-  iphone13mini: {
-    protrait: {
-      top: 50,
-      bottom: 34,
-    },
-    landscape: {
-      bottom: 21,
-      left: 50,
-      right: 50,
-    },
-  },
-};
-
-let screenOrientationCallback: (() => void) | undefined;
-
-function applySafeAreaEmulation(root: HTMLElement, insets: Inset) {
-  for (const key of Object.keys(insets) as (keyof Inset)[]) {
-    const value = insets[key];
-    if (!value || value === 0) continue;
-    root.style.setProperty(`--safe-area-inset-${key}`, `${value}px`);
-  }
-}
-
-function setupSafeAreaEmulation(name: string) {
-  const insets = safeAreaInsets[name];
-  const root = document.querySelector(":root")! as HTMLElement;
-  if (!insets) {
-    if (screenOrientationCallback) {
-      window.screen.orientation.removeEventListener(
-        "change",
-        screenOrientationCallback,
-      );
-      screenOrientationCallback = undefined;
-    }
-    for (const name of ["top", "right", "bottom", "left"]) {
-      root.style.removeProperty(`--safe-area-inset-${name}`);
-    }
-  } else {
-    screenOrientationCallback = () => {
-      if (window.screen.orientation.type === "portrait-primary") {
-        console.debug("safe area emulation: protrait");
-        applySafeAreaEmulation(root, insets.protrait);
-      } else if (window.screen.orientation.type === "landscape-primary") {
-        console.debug("safe area emulation: landscape");
-        applySafeAreaEmulation(root, insets.landscape);
-      }
-    };
-    window.screen.orientation.addEventListener(
-      "change",
-      screenOrientationCallback,
-    );
-    screenOrientationCallback();
-  }
-}
-
 type Strings = {
   ["lang.auto"]: Template<{ detected: string }>;
 } & Record<string, string | undefined>;
@@ -327,45 +235,6 @@ const Settings: ParentComponent = (props) => {
           </ListItem>
           <Divider />
         </li>
-        {import.meta.env.DEV ? (
-          <li>
-            <ListSubheader>Developer Tools</ListSubheader>
-            <ListItem
-              secondaryAction={
-                window.screen?.orientation ? (
-                  <NativeSelect
-                    sx={{ maxWidth: "40vw" }}
-                    onChange={(event) => {
-                      const k = event.currentTarget.value;
-                      setupSafeAreaEmulation(k);
-                    }}
-                  >
-                    <option>Don't change</option>
-                    <option value={"ua"}>User agent</option>
-                    <option value={"iphone15"}>
-                      iPhone 15 and Plus, Pro, Pro Max
-                    </option>
-                    <option value={"iphone12"}>iPhone 12, 13 and 14</option>
-                    <option value={"iphone13mini"}>iPhone 13 mini</option>
-                  </NativeSelect>
-                ) : undefined
-              }
-            >
-              <ListItemText
-                secondary={
-                  window.screen?.orientation
-                    ? undefined
-                    : "Unsupported on This Platform"
-                }
-              >
-                Safe Area Insets
-              </ListItemText>
-            </ListItem>
-            <Divider />
-          </li>
-        ) : (
-          <></>
-        )}
       </List>
     </Scaffold>
   );