src/material/AppTopBar.css

@@ -1,6 +1,5 @@
 .AppTopBar {
   & > .toolbar {
     padding-top: var(--safe-area-inset-top, 0px);
-    gap: 8px;
   }
 }

src/material/AppTopBar.tsx

@@ -2,12 +2,11 @@ import { AppBar, Toolbar } from "@suid/material";
 import { splitProps, type JSX, type ParentComponent } from "solid-js";
 import "./AppTopBar.css";
 import { useWindowSize } from "@solid-primitives/resize-observer";
-import type { AppBarProps } from "@suid/material/AppBar";
 
 const AppTopBar: ParentComponent<{
   class?: string;
   style?: JSX.HTMLAttributes<HTMLElement>["style"];
-} & AppBarProps> = (oprops) => {
+}> = (oprops) => {
   const [props, rest] = splitProps(oprops, ["children", "class"]);
   const windowSize = useWindowSize();
 

src/material/BottomSheet.tsx

@@ -13,7 +13,6 @@ import {
   animateSlideInFromRight,
   animateSlideOutToRight,
 } from "~platform/anim";
-import { isPointNotInRect } from "~platform/dom";
 
 export type BottomSheetProps = {
   open?: boolean;
@@ -121,7 +120,12 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
     event.stopPropagation();
     if (event.target !== event.currentTarget) return;
     const rect = event.currentTarget.getBoundingClientRect();
-    if (isPointNotInRect(rect, event.clientX, event.clientY)) {
+    const isNotInDialog =
+      event.clientY < rect.top ||
+      event.clientY > rect.bottom ||
+      event.clientX < rect.left ||
+      event.clientX > rect.right;
+    if (isNotInDialog) {
       props.onClose?.("backdrop");
     }
   };

src/material/Scaffold.css

@@ -6,6 +6,19 @@
   .MuiToolbar-root {
     margin-left: var(--safe-area-inset-left);
     margin-right: var(--safe-area-inset-right);
+
+    >.MuiButtonBase-root {
+      &:first-child {
+        margin-left: -0.5em;
+        margin-right: 24px;
+      }
+
+      &:last-child {
+        margin-right: -0.5em;
+        margin-left: 24px;
+      }
+
+    }
   }
 }
 
@@ -27,6 +40,5 @@
 .Scaffold {
   height: 100%;
   width: 100%;
-  display: contents;
   background-color: var(--tutu-color-surface);
 }

src/platform/StackedRouter.tsx

@@ -19,7 +19,6 @@ import { animateSlideInFromRight, animateSlideOutToRight } from "./anim";
 import { ANIM_CURVE_DECELERATION, ANIM_CURVE_STD } from "~material/theme";
 import { makeEventListener } from "@solid-primitives/event-listener";
 import { useWindowSize } from "@solid-primitives/resize-observer";
-import { isPointNotInRect } from "./dom";
 
 export type StackedRouterProps = Omit<RouterProps, "url">;
 
@@ -174,7 +173,12 @@ function onDialogClick(
 ) {
   if (event.target !== event.currentTarget) return;
   const rect = event.currentTarget.getBoundingClientRect();
-  if (isPointNotInRect(rect, event.clientX, event.clientY)) {
+  const isNotInDialog =
+    event.clientY < rect.top ||
+    event.clientY > rect.bottom ||
+    event.clientX < rect.left ||
+    event.clientX > rect.right;
+  if (isNotInDialog) {
     onClose();
   }
 }

src/platform/dom.ts

@@ -1,5 +0,0 @@
-export function isPointNotInRect(rect: DOMRect, ptX: number, ptY: number) {
-  return (
-    ptY < rect.top || ptY > rect.bottom || ptX < rect.left || ptX > rect.right
-  );
-}

src/profiles/Profile.tsx

@@ -62,7 +62,6 @@ import {
   createSingluarItemSelection,
   default as ItemSelectionProvider,
 } from "../timelines/toots/ItemSelectionProvider";
-import AppTopBar from "~material/AppTopBar";
 
 const Profile: Component = () => {
   const { pop } = useNavigator();
@@ -196,15 +195,20 @@ const Profile: Component = () => {
   return (
     <Scaffold
       topbar={
-        <AppTopBar
+        <AppBar
           role="navigation"
           position="static"
           color={scrolledPastBanner() ? "primary" : "transparent"}
           elevation={scrolledPastBanner() ? undefined : 0}
-          style={{
+        >
+          <Toolbar
+            variant="dense"
+            sx={{
+              display: "flex",
               color: scrolledPastBanner()
                 ? undefined
                 : bannerSampledColors()?.text,
+              paddingTop: "var(--safe-area-inset-top)",
             }}
           >
             <IconButton color="inherit" onClick={[pop, 1]} aria-label="Close">
@@ -227,7 +231,8 @@ const Profile: Component = () => {
             >
               <MoreVert />
             </IconButton>
-        </AppTopBar>
+          </Toolbar>
+        </AppBar>
       }
       class="Profile"
     >