More consistent mobile display

src/viser/client/src/App.tsx

@@ -180,6 +180,7 @@ function ViewerCanvas({ children }: { children: React.ReactNode }) {
       }}
       performance={{ min: 0.95 }}
       ref={viewer.canvasRef}
+      // Handle scene click events.
       onClick={(e) => {
         // Don't send click events if the scene pointer events are disabled.
         if (!viewer.sceneClickEnable.current) return;

src/viser/client/src/ControlPanel/BottomPanel.tsx

@@ -88,3 +88,13 @@ BottomPanel.Contents = function BottomPanelContents({
   const panelContext = React.useContext(BottomPanelContext)!;
   return <Collapse in={panelContext.expanded}>{children}</Collapse>;
 };
+
+/** Hides contents when panel is collapsed. */
+BottomPanel.HideWhenCollapsed = function BottomPanelHideWhenCollapsed({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const expanded = React.useContext(BottomPanelContext)?.expanded ?? true;
+  return expanded ? children : null;
+};

src/viser/client/src/ControlPanel/ControlPanel.tsx

@@ -78,7 +78,9 @@ export default function ControlPanel(props: {
       <BottomPanel>
         <BottomPanel.Handle>
           <ConnectionStatus />
-          {generatedServerToggleButton}
+          <BottomPanel.HideWhenCollapsed>
+            {generatedServerToggleButton}
+          </BottomPanel.HideWhenCollapsed>
         </BottomPanel.Handle>
         <BottomPanel.Contents>{panelContents}</BottomPanel.Contents>
       </BottomPanel>