@classic-homes/theme-svelte 1.24.0 → 1.24.2

package/dist/lib/components/DataPanel.svelte

@@ -1278,6 +1278,18 @@
     return 'animate-scale-in';
   });
 
+  // Resize handles sit over the content's right/bottom edge, where its
+  // scrollbars live. Inset the scroll container so the scrollbars stay clickable.
+  const resizeRight = $derived(
+    !disableResize &&
+      ((variant === 'full' && (mode === 'detached' || edge === 'left')) ||
+        (variant === 'card' && isExpanded && !isMobile))
+  );
+  const resizeBottom = $derived(
+    !disableResize && variant === 'full' && (mode === 'detached' || edge === 'top')
+  );
+  const hasFooter = $derived(!!(footer || actions.length > 0 || footerActions));
+
   // Whether to show content (collapsed card only shows header)
   const showContent = $derived(
     variant !== 'card' ||
@@ -1535,7 +1547,9 @@
 
       <!-- Content (hidden when card is collapsed) -->
       {#if showContent}
-        <DataPanelContent>
+        <DataPanelContent
+          class={cn(resizeRight && 'mr-2.5', resizeBottom && !hasFooter && 'mb-2.5')}
+        >
           {@render children()}
         </DataPanelContent>
 

package/dist/lib/components/HeaderSearch.svelte

@@ -102,6 +102,16 @@
   let inputRef: HTMLInputElement | undefined = $state();
   let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 
+  // The shortcut hint names the platform's modifier. The server cannot know the
+  // platform, so it renders "Ctrl" and Apple devices switch to ⌘ once mounted.
+  let modifierKey = $state('Ctrl');
+  $effect(() => {
+    const platform =
+      (navigator as Navigator & { userAgentData?: { platform?: string } }).userAgentData
+        ?.platform || navigator.platform;
+    if (/mac|iphone|ipad|ipod/i.test(platform)) modifierKey = '⌘';
+  });
+
   function isGrouped(
     value: SearchResultItem[] | SearchResultGroup[]
   ): value is SearchResultGroup[] {
@@ -228,7 +238,7 @@
         className
       )}
       aria-label="Search"
-      title={enableShortcut ? `Search (⌘/${shortcutKey.toUpperCase()})` : 'Search'}
+      title={enableShortcut ? `Search (${modifierKey}+${shortcutKey.toUpperCase()})` : 'Search'}
     >
       <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path
@@ -264,7 +274,7 @@
         <kbd
           class="pointer-events-none hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground sm:inline-flex"
         >
-          <span class="text-xs">⌘</span>{shortcutKey.toUpperCase()}
+          <span class="text-xs">{modifierKey}</span>{shortcutKey.toUpperCase()}
         </kbd>
       {/if}
     </button>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "1.24.0",
+  "version": "1.24.2",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",