fix(web): ensure relative modals have proper padding

web/src/components/AppBar.jsx

@@ -68,19 +68,19 @@ export default function AppBar({ title }) {
 
   return (
     <div
-      className={`w-full border-b border-gray-100 dark:border-gray-700 flex items-center align-middle p-4 space-x-2 fixed left-0 right-0 z-10 bg-white dark:bg-gray-900 transform transition-all duration-200 translate-y-0 ${
+      className={`w-full border-b border-gray-200 dark:border-gray-700 flex items-center align-middle p-4 space-x-2 fixed left-0 right-0 z-10 bg-white dark:bg-gray-900 transform transition-all duration-200 translate-y-0 ${
         !show ? '-translate-y-full' : ''
       } ${!atZero ? 'shadow' : ''}`}
     >
       <div className="lg:hidden">
-        <Button className="rounded-full w-12 h-12" onClick={handleShowSidebar} type="text">
+        <Button color="black" className="rounded-full w-12 h-12" onClick={handleShowSidebar} type="text">
           <MenuIcon />
         </Button>
       </div>
       <LinkedLogo />
       <div className="flex-grow-1 flex justify-end w-full">
         <div ref={moreRef}>
-          <Button className="rounded-full w-12 h-12" onClick={handleShowMenu} type="text">
+          <Button color="black" className="rounded-full w-12 h-12" onClick={handleShowMenu} type="text">
             <MoreIcon />
           </Button>
         </div>

web/src/components/Button.jsx

@@ -24,6 +24,11 @@ const ButtonColors = {
     outlined: '',
     text: '',
   },
+  black: {
+    contained: '',
+    outlined: '',
+    text: 'text-black dark:text-white',
+  },
 };
 
 const ButtonTypes = {

web/src/components/RelativeModal.jsx

@@ -1,6 +1,8 @@
 import { h, Fragment } from 'preact';
 import { createPortal } from 'preact/compat';
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
+
+const WINDOW_PADDING = 20;
 
 export default function RelativeModal({ className, role = 'dialog', children, onDismiss, portalRootID, relativeTo }) {
   const [position, setPosition] = useState({ top: -999, left: 0, width: 0 });
@@ -37,7 +39,7 @@ export default function RelativeModal({ className, role = 'dialog', children, on
     [ref.current]
   );
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (ref && ref.current && relativeTo && relativeTo.current) {
       const windowWidth = window.innerWidth;
       const windowHeight = window.innerHeight;
@@ -46,15 +48,15 @@ export default function RelativeModal({ className, role = 'dialog', children, on
       let top = y + height;
       let left = x;
       // too far right
-      if (left + menuWidth > windowWidth) {
-        left = windowWidth - menuWidth;
+      if (left + menuWidth >= windowWidth - WINDOW_PADDING) {
+        left = windowWidth - menuWidth - WINDOW_PADDING;
       }
       // too far left
-      else if (left < 0) {
-        left = 0;
+      else if (left < WINDOW_PADDING) {
+        left = WINDOW_PADDING;
       }
       // too close to bottom
-      if (top + menuHeight > windowHeight) {
+      if (top + menuHeight > windowHeight - WINDOW_PADDING) {
         top = y - menuHeight;
       }
       setPosition({ left, top, width });