fix(ui): wrap control bar when content is too long (#815)

apps/ui.immich.app/src/routes/(docs)/components/control-bar/BasicExample.svelte

@@ -1,9 +1,24 @@
 <script lang="ts">
-  import { ControlBar, ControlBarHeader, ControlBarTitle, Stack, toastManager } from '@immich/ui';
+  import {
+    Button,
+    ControlBar,
+    ControlBarDescription,
+    ControlBarHeader,
+    ControlBarOverflow,
+    ControlBarTitle,
+    Heading,
+    IconButton,
+    Stack,
+    toastManager,
+  } from '@immich/ui';
+  import { mdiArrowLeft, mdiUndo } from '@mdi/js';
 
   const onClose = () => {
     toastManager.primary('onClose');
   };
+  const onDone = () => {
+    toastManager.primary('onDone');
+  };
 </script>
 
 <Stack>
@@ -12,4 +27,18 @@
       <ControlBarTitle>2 Selected</ControlBarTitle>
     </ControlBarHeader>
   </ControlBar>
+
+  <Heading size="tiny" class="mb-2">Narrow screen</Heading>
+  <div class="max-w-80">
+    <ControlBar {onClose} closeIcon={mdiArrowLeft} translations={{ close: 'Back' }}>
+      <ControlBarHeader>
+        <ControlBarTitle>Very long person or workflow name</ControlBarTitle>
+        <ControlBarDescription>Pictures of Mich</ControlBarDescription>
+      </ControlBarHeader>
+      <ControlBarOverflow>
+        <IconButton aria-label="Undo" icon={mdiUndo} variant="ghost" shape="round" color="secondary" />
+        <Button variant="filled" color="primary" onclick={onDone}>Done</Button>
+      </ControlBarOverflow>
+    </ControlBar>
+  </div>
 </Stack>

packages/ui/src/lib/components/ControlBar/ControlBar.svelte

@@ -25,7 +25,7 @@
   }: ControlBarProps = $props();
 
   const styles = tv({
-    base: `h-control-bar flex w-full items-center gap-2 px-2`,
+    base: `min-h-control-bar flex flex-wrap w-full items-center gap-2 p-2`,
     variants: {
       variant: {
         filled: 'bg-light-100',
@@ -60,7 +60,7 @@
   class={cleanClass(styles({ shape, variant }), className)}
   {...restProps}
 >
-  <div class={cleanClass('flex shrink-0 items-center gap-2')}>
+  <div class={cleanClass('flex max-w-full items-center gap-2')}>
     {#if typeof closeIcon === 'function'}
       {@render closeIcon?.()}
     {:else if onClose}
@@ -70,13 +70,14 @@
         shape="round"
         variant="ghost"
         color="secondary"
+        class="shrink-0"
         aria-label={t('close', translations)}
         onclick={() => onClose()}
       />
     {/if}
 
     {#if headerChild}
-      <div class={cleanClass('flex shrink-0 flex-col', headerChild.class)}>
+      <div class={cleanClass('flex flex-col truncate', headerChild.class)}>
         {@render headerChild.children?.()}
       </div>
     {/if}
@@ -87,7 +88,7 @@
   </div>
 
   {#if overflowChild}
-    <div class={cleanClass('flex shrink-0 items-center gap-2', overflowChild.class)}>
+    <div class={cleanClass('flex shrink-0 ms-auto items-center gap-2', overflowChild.class)}>
       {@render overflowChild.children?.()}
     </div>
   {/if}

packages/ui/src/lib/components/ControlBar/ControlBarTitle.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Heading from '$lib/components/Heading/Heading.svelte';
   import type { Color, FontWeight, HeadingSize, HeadingTag } from '$lib/types.js';
+  import { cleanClass } from '$lib/utilities/internal.js';
   import type { Snippet } from 'svelte';
 
   type Props = {
@@ -18,6 +19,6 @@
   const { size = 'small', fontWeight = 'medium', color, tag, class: className, children }: Props = $props();
 </script>
 
-<Heading {tag} {size} {color} {fontWeight} class={className}>
+<Heading {tag} {size} {color} {fontWeight} class={cleanClass('truncate', className)}>
   {@render children?.()}
 </Heading>