added settings

src/material/BottomSheet.module.css

@@ -0,0 +1,32 @@
+.bottomSheet {
+  composes: surface from 'material.module.css';
+  border: none;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  padding: 0;
+  width: 100%;
+  max-width: 560px;
+  border-radius: 2px;
+  overscroll-behavior: contain;
+
+  box-shadow: var(--tutu-shadow-e16);
+
+  :global(.MuiToolbar-root) > :global(.MuiButtonBase-root):first-child {
+    color: white;
+    margin-left: -0.5em;
+    margin-right: 24px;
+  }
+
+  @media (max-width: 560px) {
+    & {
+      left: 0;
+      top: 0;
+      transform: none;
+      bottom: 0;
+      height: 100vh;
+      height: 100dvh;
+    }
+  }
+}

src/material/BottomSheet.tsx

@@ -0,0 +1,26 @@
+import { createEffect, type ParentComponent } from "solid-js";
+import styles from './BottomSheet.module.css'
+
+export type BottomSheetProps = {
+  open?: boolean;
+};
+
+const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
+  let element: HTMLDialogElement;
+
+  createEffect(() => {
+    if (props.open) {
+      if (!element.open) {
+        element.showModal();
+      }
+    } else {
+      if (element.open) {
+        element.close();
+      }
+    }
+  });
+
+  return <dialog class={styles.bottomSheet} ref={element!}>{props.children}</dialog>;
+};
+
+export default BottomSheet;

src/material/Scaffold.tsx

@@ -22,9 +22,6 @@ const Scaffold: ParentComponent<ScaffoldProps> = (props) => {
   css`
     .scaffold-content {
       --scaffold-topbar-height: ${(topbarSize.height?.toString() ?? 0) + "px"};
-
-      height: 100%;
-      width: 100%;
     }
 
     .topbar {