mobile fixes

src/components/Mobile.tsx

@@ -6,6 +6,7 @@ import { isActionPanelOpenAtom, isDarkModeAtom, isNavPanelOpenAtom, layoutAtom }
 import { Button, bs } from "../style";
 import { type WithDarkMode, withDarkMode } from "../style/darkMode";
 import { Palette } from "../style/palette";
+import { iconAtom, titleAtom } from "../state/meta";
 
 export const MobileHeaderContainer = styled.h2<WithDarkMode>`
   position: absolute;
@@ -44,6 +45,8 @@ export const MobileAction = styled.div`
 `;
 
 export const MobileHeader = () => {
+  const [icon] = useAtom(iconAtom);
+  const [title] = useAtom(titleAtom);
   const [isDarkMode] = useAtom(isDarkModeAtom);
   const [isNavPanelOpen, setIsNavPanelOpened] = useAtom(isNavPanelOpenAtom);
   const [isActionsPanelOpen, setIsActionPanelOpened] = useAtom(isActionPanelOpenAtom);
@@ -57,8 +60,8 @@ export const MobileHeader = () => {
           setIsNavPanelOpened(!isNavPanelOpen);
         }}
       >
-        🔬
-        <span>Experiment</span>
+        {icon}
+        <span>{title}</span>
       </MobileHeaderContainer>
       <MobileAction>
         <Button

src/pages/NewExperiment.tsx

@@ -11,6 +11,7 @@ import {
   type Message,
   type Role,
   experimentAtom,
+  isActionPanelOpenAtom,
   isDarkModeAtom,
   parentAtom,
   templatesAtom,
@@ -27,12 +28,12 @@ import {
   tempAtom,
 } from "../state/inference";
 import { Sidebar, bs } from "../style";
-import { withDarkMode } from "../style/darkMode";
+import { withDarkMode, type WithDarkMode } from "../style/darkMode";
 import { Palette } from "../style/palette";
 import { useHandlers } from "../utils/keyboard";
 import { Actions, Page } from "./_page";
 
-export const Block = styled.div<{ isDarkMode?: boolean }>`
+export const Block = styled.div<WithDarkMode>`
   display: flex;
   flex-direction: column;
 
@@ -81,6 +82,7 @@ export const Block = styled.div<{ isDarkMode?: boolean }>`
   }
   select,
   button {
+    padding-top: ${bs(1 / 4)};
     :hover {
       cursor: pointer;
       background: "#fff9";
@@ -219,6 +221,8 @@ export default function NewExperiment() {
   const [providerOptions] = useAtom(availableProviderOptionsAtom);
   const [provider, setProvider] = useAtom(selectedProviderAtom);
 
+  const [isRunning] = useAtom(isRunningAtom);
+
   useEffect(() => {
     if (!provider && providerOptions.length > 0) {
       setProvider(providerOptions[0].id);
@@ -302,6 +306,11 @@ export default function NewExperiment() {
   const [actions] = useAtom(actionsAtom);
   const startExperiment = useSetAtom(runInferenceAtom);
 
+  const setIsActionPanelOpen = useSetAtom(isActionPanelOpenAtom);
+  useEffect(() => {
+    setIsActionPanelOpen(false);
+  }, [experiment, isRunning])
+
   const submit = () => {
     if (isEditing) {
       setSelection(null);

src/pages/_page.tsx

@@ -28,6 +28,7 @@ export const PageContainer = styled.div<WithDarkMode & WithLayout>`
     p.layout === "mobile" &&
     css`
       padding-top: 80px;
+      padding-bottom: ${bs(1 / 2)};
     `}
 `;
 

src/pages/_router.tsx

@@ -7,7 +7,6 @@ import Templates from "./Templates";
 import { useSetAtom } from "jotai";
 import { iconAtom, titleAtom } from "../state/meta";
 import { useEffect, type PropsWithChildren } from "react";
-import { TRIANGLE } from "../const";
 
 type RouteList = Array<{
   icon: string;
@@ -29,8 +28,7 @@ function IconAndTitleUpdater({ icon, title, children }: PropsWithChildren<{ icon
   const setTitle = useSetAtom(titleAtom);
   const setIcon = useSetAtom(iconAtom);
   useEffect(() => {
-    const newTitle = title === "Experiment" ? title : `${title} ${TRIANGLE} Experiment`;
-    setTitle(newTitle);
+    setTitle(title);
     setIcon(icon);
   }, [title, icon]);
   return children;

src/root.tsx

@@ -12,7 +12,7 @@ import { Hydration } from "./utils/hydration";
 import { FavIcon } from "./components/FavIcon";
 import { getRealm } from "./utils/realm";
 import { clientFile } from "./const";
-import { titleAtom, descriptionAtom, iconAtom } from "./state/meta";
+import { pageTitleAtom, descriptionAtom, iconAtom } from "./state/meta";
 import { ErrorBoundary } from "./components/error";
 import { isActionPanelOpenAtom, isDarkModeAtom, isNavPanelOpenAtom, layoutAtom, layoutTrackerAtom } from "./state/common";
 import { MobileHeader } from "./components/Mobile";
@@ -68,7 +68,7 @@ const App = () => {
 };
 
 const Meta = () => {
-  const [title] = useAtom(titleAtom);
+  const [title] = useAtom(pageTitleAtom);
   const [description] = useAtom(descriptionAtom);
   const [icon] = useAtom(iconAtom);
   return (

src/state/meta.ts

@@ -1,6 +1,11 @@
 import { atom } from "jotai";
-import { description, title } from "../const";
+import { description, title, TRIANGLE } from "../const";
 
 export const titleAtom = atom(title);
+export const pageTitleAtom = atom(get => {
+  const title = get(titleAtom);
+  const newTitle = title === "Experiment" ? title : `${title} ${TRIANGLE} Experiment`;
+  return newTitle;
+})
 export const descriptionAtom = atom(description);
 export const iconAtom = atom("🔬");