Make stuff hide as the window narrows naively

Signed-off-by: Nick Cameron <nrc@ncameron.org>

docs/kcl-lang/settings.md

@@ -8,16 +8,16 @@ layout: manual
 
 There are three levels of settings available in Zoo Design Studio:
 
-1. [User Settings](/docs/kcl/settings/user): Global settings that apply to all projects, stored in `user.toml`
-2. [Project Settings](/docs/kcl/settings/project): Settings specific to a project, stored in `project.toml`
+1. [User Settings](/docs/kcl-lang/settings/user): Global settings that apply to all projects, stored in `user.toml`
+2. [Project Settings](/docs/kcl-lang/settings/project): Settings specific to a project, stored in `project.toml`
 3. Per-file Settings: Settings that apply to a single KCL file, specified using the `@settings` attribute
 
 ## Configuration Files
 
 Zoo Design Studio uses TOML files for configuration:
 
-* **User Settings**: `user.toml` - See [complete documentation](/docs/kcl/settings/user)
-* **Project Settings**: `project.toml` - See [complete documentation](/docs/kcl/settings/project)
+* **User Settings**: `user.toml` - See [complete documentation](/docs/kcl-lang/settings/user)
+* **Project Settings**: `project.toml` - See [complete documentation](/docs/kcl-lang/settings/project)
 
 ## Per-file settings
 

src/components/CommandBar/CommandBarHeader.tsx

@@ -148,6 +148,8 @@ function CommandBarHeader({ children }: React.PropsWithChildren<object>) {
                             ),
                             4
                           )
+                        ) : arg.inputType === 'text' && !arg.valueSummary ? (
+                          `${argValue.slice(0, 12)}${argValue.length > 12 ? '...' : ''}`
                         ) : typeof argValue === 'object' ? (
                           arg.valueSummary ? (
                             arg.valueSummary(argValue)

src/components/CommandBarOpenButton.tsx

@@ -15,8 +15,8 @@ export function CommandBarOpenButton() {
       data-testid="command-bar-open-button"
     >
       <CustomIcon name="command" className="w-5 h-5" />
-      <span>Commands</span>
-      <kbd className="dark:bg-chalkboard-80 font-mono rounded-sm text-primary/70 dark:text-inherit inline-block px-1">
+      <span className="max-xl:sr-only">Commands</span>
+      <kbd className="max-xl:sr-only dark:bg-chalkboard-80 font-mono rounded-sm text-primary/70 dark:text-inherit inline-block px-1">
         {hotkeyDisplay(COMMAND_PALETTE_HOTKEY, platform)}
       </kbd>
     </button>

src/components/EngineStream.tsx

@@ -37,6 +37,7 @@ import {
 } from '@src/lib/utils'
 import { DEFAULT_DEFAULT_LENGTH_UNIT } from '@src/lib/constants'
 import { createThumbnailPNGOnDesktop } from '@src/lib/screenshot'
+import type { SettingsViaQueryString } from '@src/lib/settings/settingsTypes'
 
 export const EngineStream = (props: {
   pool: string | null
@@ -54,12 +55,17 @@ export const EngineStream = (props: {
   const last = useRef<number>(Date.now())
   const videoWrapperRef = useRef<HTMLDivElement>(null)
 
-  const settingsEngine = {
+  /**
+   * We omit `pool` here because `engineStreamMachine` will override it anyway
+   * within the `EngineStreamTransition.StartOrReconfigureEngine` Promise actor.
+   */
+  const settingsEngine: Omit<SettingsViaQueryString, 'pool'> = {
     theme: settings.app.theme.current,
     enableSSAO: settings.modeling.enableSSAO.current,
     highlightEdges: settings.modeling.highlightEdges.current,
     showScaleGrid: settings.modeling.showScaleGrid.current,
     cameraProjection: settings.modeling.cameraProjection.current,
+    cameraOrbit: settings.modeling.cameraOrbit.current,
   }
 
   const { state: modelingMachineState, send: modelingMachineActorSend } =

src/components/ProjectSidebarMenu.tsx

@@ -51,7 +51,7 @@ const ProjectSidebarMenu = ({
         <ProjectMenuPopover project={project} file={file} />
       ) : (
         <span
-          className="hidden select-none cursor-default text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap lg:block"
+          className="hidden select-none cursor-default text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap xl:block"
           data-testid="project-name"
         >
           {project?.name ? project.name : APP_NAME}
@@ -259,12 +259,12 @@ function ProjectMenuPopover({
   return (
     <Popover className="relative">
       <Popover.Button
-        className="gap-1 rounded-sm h-9 mr-auto max-h-min min-w-max border-0 py-1 px-2 flex items-center  focus-visible:outline-appForeground dark:hover:bg-chalkboard-90"
+        className="gap-1 rounded-sm h-9 mr-auto max-h-min min-w-max border-transparent dark:border-transparent p-0 xl:py-1 xl:px-2 flex items-center  focus-visible:outline-appForeground dark:hover:bg-chalkboard-90"
         data-testid="project-sidebar-toggle"
       >
-        <div className="flex flex-col items-start py-0.5">
+        <div className="hidden xl:flex flex-col items-start py-0.5">
           <span
-            className="hidden text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap lg:block"
+            className="text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap"
             data-testid="app-header-file-name"
           >
             {isDesktop() && file?.name
@@ -275,7 +275,7 @@ function ProjectMenuPopover({
           </span>
           {isDesktop() && project?.name && (
             <span
-              className="hidden text-xs text-chalkboard-70 dark:text-chalkboard-40 whitespace-nowrap lg:block"
+              className="text-xs text-chalkboard-70 dark:text-chalkboard-40 whitespace-nowrap"
               data-testid="app-header-project-name"
             >
               {project.name}
@@ -284,8 +284,9 @@ function ProjectMenuPopover({
         </div>
         <CustomIcon
           name="caretDown"
-          className="w-4 h-4 text-chalkboard-70 dark:text-chalkboard-40 ui-open:rotate-180"
+          className="hidden xl:block w-4 h-4 text-chalkboard-70 dark:text-chalkboard-40 ui-open:rotate-180"
         />
+        <CustomIcon name="three-dots" className="xl:hidden w-5 h-5" />
       </Popover.Button>
 
       <Transition

src/components/ShareButton.tsx

@@ -32,7 +32,7 @@ export const ShareButton = () => {
       data-testid="share-button"
     >
       <CustomIcon name="link" className="w-5 h-5" />
-      <span className="flex-1">Share</span>
+      <span className="max-xl:hidden flex-1">Share</span>
       <Tooltip
         position="bottom-right"
         contentClassName="max-w-none flex items-center gap-4"