Fix some mobile styles

src/games/storywriter/assets/editor.module.css

@@ -24,6 +24,10 @@
     padding: 0 72px 72px;
 }
 
+.content.menuContent {
+    padding-bottom: 10px;
+}
+
 .editable {
     width: 100%;
     min-height: 100%;

src/games/storywriter/assets/sidebar.module.css

@@ -29,11 +29,6 @@
 }
 
 .closed {
-    width: 32px;
-    min-width: 32px;
-}
-
-.closed[data-controlled] {
     width: 0;
     min-width: 0;
     border: none;

src/games/storywriter/components/editor.tsx

@@ -94,7 +94,7 @@ export const Editor = () => {
     return (
         <div class={styles.editor}>
             {currentStory && <div class={styles.title}>{currentStory.title}</div>}
-            <div class={styles.content} ref={contentRef}>
+            <div class={clsx(styles.content, currentTab === 'menu' && styles.menuContent)} ref={contentRef}>
                 {currentTab === "menu" && (
                     <Menu />
                 )}

src/games/storywriter/components/sidebar.tsx

@@ -1,43 +1,29 @@
 import clsx from "clsx";
 import type { ComponentChildren } from "preact";
-import { useBool } from "@common/hooks/useBool";
 import styles from '../assets/sidebar.module.css';
 import { PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen } from "lucide-preact";
 
 interface Props {
     side: 'left' | 'right';
     children?: ComponentChildren;
-    open?: boolean;
-    onToggle?: () => void;
-    onCollapseChanged?: (collapsed: boolean) => void;
+    open: boolean;
+    onToggle: () => void;
     class?: string;
 }
 
-export const Sidebar = ({ side, children, open: controlledOpen, onToggle, onCollapseChanged, class: className }: Props) => {
-    const internalOpen = useBool(true);
-    const isControlled = controlledOpen !== undefined;
-    const isOpen = isControlled ? controlledOpen : internalOpen.value;
-
-    const handleToggle = () => {
-        if (isControlled) {
-            onToggle?.();
-        } else {
-            internalOpen.toggle();
-        }
-        onCollapseChanged?.(!isOpen);
-    };
+export const Sidebar = ({ side, children, open, onToggle, class: className }: Props) => {
 
     const isLeft = side === 'left';
     const IconComponent = isLeft
-        ? (isOpen ? PanelLeftClose : PanelLeftOpen)
-        : (isOpen ? PanelRightClose : PanelRightOpen);
+        ? (open ? PanelLeftClose : PanelLeftOpen)
+        : (open ? PanelRightClose : PanelRightOpen);
 
     return (
-        <div class={clsx(styles.sidebar, isOpen ? styles.open : styles.closed, className)} data-side={side} data-controlled={isControlled || undefined}>
-            <button class={clsx(styles.toggle, isControlled && styles.toggleMobile)} onClick={handleToggle}>
+        <div class={clsx(styles.sidebar, open ? styles.open : styles.closed, className)} data-side={side}>
+            <button class={styles.toggle} onClick={onToggle}>
                 <IconComponent size={16} />
             </button>
-            {isOpen && (
+            {open && (
                 <div class={styles.content}>
                     {children}
                 </div>