ReplyEditor: only show toolbar when active

src/timelines/ReplyEditor.tsx

@@ -229,17 +229,21 @@ const ReplyEditor: Component<{
       onClick={(e) => inputRef.focus()}
     >
       <div class={tootComposers.replyInput}>
-        <Avatar src={props.profile.inf?.avatar} sx={{marginLeft: '-0.25em'}} />
+        <Avatar
+          src={props.profile.inf?.avatar}
+          sx={{ marginLeft: "-0.25em" }}
+        />
         <textarea
           ref={inputRef!}
           placeholder={`Reply to ${props.replyToDisplayName}...`}
           style={{ width: "100%", border: "none" }}
         ></textarea>
-        <IconButton sx={{marginRight: '-0.5em'}}>
+        <IconButton sx={{ marginRight: "-0.5em" }}>
           <Send />
         </IconButton>
       </div>
 
+      <Show when={typing()}>
         <div
           style={{
             display: "flex",
@@ -274,6 +278,7 @@ const ReplyEditor: Component<{
           code={language()}
           onCodeChange={setLanguage}
         />
+      </Show>
     </div>
   );
 };

src/timelines/TootBottomSheet.tsx

@@ -270,6 +270,7 @@ const TootBottomSheet: Component = (props) => {
           )}
         </For>
       </TimeSourceProvider>
+      <div style={{height: "var(--safe-area-inset-bottom, 0)"}}></div>
     </Scaffold>
   );
 };