diff --git a/packages/ui/src/lib/components/AppShell/AppShell.svelte b/packages/ui/src/lib/components/AppShell/AppShell.svelte
index bff3796d..4104b557 100644
--- a/packages/ui/src/lib/components/AppShell/AppShell.svelte
+++ b/packages/ui/src/lib/components/AppShell/AppShell.svelte
@@ -20,7 +20,7 @@
 
 <div class={cleanClass('flex h-dvh flex-col overflow-hidden', className)}>
   {#if bar}
-    <div class={cleanClass('h-control-bar-container px-2 pt-2', zIndex.AppShellBar, bar.class)}>
+    <div class={cleanClass('min-h-control-bar-container px-2 pt-2', zIndex.AppShellBar, bar.class)}>
       {@render bar.children?.()}
     </div>
   {:else if header}
diff --git a/packages/ui/src/lib/components/AppShell/AppShellHeader.svelte b/packages/ui/src/lib/components/AppShell/AppShellHeader.svelte
index 36c48994..cd2ad450 100644
--- a/packages/ui/src/lib/components/AppShell/AppShellHeader.svelte
+++ b/packages/ui/src/lib/components/AppShell/AppShellHeader.svelte
@@ -12,7 +12,7 @@
   let { border = true, class: className, children }: Props = $props();
 
   const styles = tv({
-    base: 'h-control-bar-container flex items-center gap-2',
+    base: 'min-h-control-bar-container flex items-center gap-2',
     variants: {
       border: {
         true: 'border-b',