fix(web): add drop shadow to asset viewer nav bar and prevent button shrinking (#27404)

- Add subtle drop shadow to the asset viewer nav bar for better visual
  separation from the image behind it
- Add drop shadow to the OCR text recognition button in the lower right
- Prevent nav bar action buttons from shrinking to nothing by adding
  *:shrink-0 to the flex container, with p-1/-m-1 to avoid clipping
  focus outlines

Change-Id: I61cdc0ec66a65cde1c95b40c2c5428006a6a6964

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -104,13 +104,16 @@
 <CommandPaletteDefaultProvider name={$t('assets')} actions={withoutIcons([Close, Cast, ...Object.values(Actions)])} />
 
 <div
-  class="flex h-16 place-items-center justify-between bg-linear-to-b from-black/40 px-3 transition-transform duration-200"
+  class="flex h-16 place-items-center justify-between bg-linear-to-b from-black/40 px-3 transition-transform duration-200 drop-shadow-[0_0_1px_rgba(0,0,0,0.4)]"
 >
   <div class="dark">
     <ActionButton action={Close} />
   </div>
 
-  <div class="flex items-center gap-2 overflow-x-auto dark" data-testid="asset-viewer-navbar-actions">
+  <div
+    class="flex p-1 -m-1 items-center gap-2 overflow-x-auto *:shrink-0 dark"
+    data-testid="asset-viewer-navbar-actions"
+  >
     {#if assetViewerManager.isImageLoading}
       <Tooltip text={$t('loading')}>
         {#snippet child({ props })}

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -564,7 +564,7 @@
     {/if}
 
     {#if showOcrButton}
-      <div class="absolute bottom-0 end-0 mb-6 me-6">
+      <div class="absolute bottom-0 end-0 mb-6 me-6 drop-shadow-[0_0_1px_rgba(0,0,0,0.4)]">
         <OcrButton />
       </div>
     {/if}