fix: general PR cleanup

- add skip link unit test
- remove unused tailwind styles
- adjust asset grid spacing
- fix event propogation

Author: ben-basten

web/src/lib/actions/__test__/focus-trap-test.svelte

@@ -3,15 +3,16 @@
 
   interface Props {
     show: boolean;
+    active?: boolean;
   }
 
-  let { show = $bindable() }: Props = $props();
+  let { show = $bindable(), active = $bindable() }: Props = $props();
 </script>
 
 <button type="button" onclick={() => (show = true)}>Open</button>
 
 {#if show}
-  <div use:focusTrap>
+  <div use:focusTrap={{ active }}>
     <div>
       <span>text</span>
       <button data-testid="one" type="button" onclick={() => (show = false)}>Close</button>

web/src/lib/actions/__test__/focus-trap.spec.ts

@@ -12,6 +12,12 @@ describe('focusTrap action', () => {
     expect(document.activeElement).toEqual(screen.getByTestId('one'));
   });
 
+  it('should not set focus if inactive', async () => {
+    render(FocusTrapTest, { show: true, active: false });
+    await tick();
+    expect(document.activeElement).toBe(document.body);
+  });
+
   it('supports backward focus wrapping', async () => {
     render(FocusTrapTest, { show: true });
     await tick();

web/src/lib/actions/focus-trap.ts

@@ -5,7 +5,7 @@ interface Options {
   /**
    * Set whether the trap is active or not.
    */
-  active: boolean;
+  active?: boolean;
 }
 
 const selectors =

web/src/lib/components/photos-page/asset-grid.svelte

@@ -816,7 +816,7 @@
 <!-- Right margin MUST be equal to the width of immich-scrubbable-scrollbar -->
 <section
   id="asset-grid"
-  class="scrollbar-hidden h-full overflow-y-auto outline-none pl-2 {isEmpty ? 'm-0' : 'ml-4 tall:ml-0 mr-[60px]'}"
+  class="scrollbar-hidden h-full overflow-y-auto outline-none {isEmpty ? 'm-0' : 'ml-4 mr-[60px]'}"
   tabindex="-1"
   use:resizeObserver={({ height, width }) => ((viewport.width = width), (viewport.height = height))}
   bind:this={element}

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -73,8 +73,10 @@
             isSidebarOpen.value = !isSidebarOpen.value;
           }}
           onmousedown={(event: MouseEvent) => {
-            // stops event from reaching the default handler when clicking outside of the sidebar
-            event.stopPropagation();
+            if (isSidebarOpen.value) {
+              // stops event from reaching the default handler when clicking outside of the sidebar
+              event.stopPropagation();
+            }
           }}
           class="md:hidden"
         />
@@ -84,7 +86,7 @@
       </a>
     </div>
     <div class="flex justify-between gap-4 lg:gap-8 pr-6">
-      <div class="hidden flex-1 tall:pl-0 sm:block">
+      <div class="hidden w-full max-w-5xl flex-1 tall:pl-0 sm:block">
         {#if $featureFlags.search}
           <SearchBar grayTheme={true} />
         {/if}

web/src/lib/components/shared-components/side-bar/side-bar.svelte

@@ -84,9 +84,7 @@
       bind:isSelected={isSharingSelected}
     ></SideBarLink>
 
-    <div class="text-xs transition-all duration-200 dark:text-immich-dark-fg">
-      <p class="p-6">{$t('library').toUpperCase()}</p>
-    </div>
+    <p class="text-xs p-6 dark:text-immich-dark-fg">{$t('library').toUpperCase()}</p>
 
     <SideBarLink
       title={$t('favorites')}

web/src/lib/components/shared-components/side-bar/storage-space.svelte

@@ -46,34 +46,32 @@
 </script>
 
 <div
-  class="storage-status p-4 bg-gray-100 dark:bg-immich-dark-primary/10 ml-4 rounded-lg text-sm min-w-52 overflow-hidden"
+  class="storage-status p-4 bg-gray-100 dark:bg-immich-dark-primary/10 ml-4 rounded-lg text-sm min-w-52"
   title={$t('storage_usage', {
     values: {
       used: getByteUnitString(usedBytes, $locale, 3),
       available: getByteUnitString(availableBytes, $locale, 3),
     },
   })}
 >
-  <div>
-    <p class="font-medium text-immich-dark-gray dark:text-white mb-2">{$t('storage')}</p>
+  <p class="font-medium text-immich-dark-gray dark:text-white mb-2">{$t('storage')}</p>
 
-    {#if userInteraction.serverInfo}
-      <p class="text-gray-500 dark:text-gray-300">
-        {$t('storage_usage', {
-          values: {
-            used: getByteUnitString(usedBytes, $locale),
-            available: getByteUnitString(availableBytes, $locale),
-          },
-        })}
-      </p>
+  {#if userInteraction.serverInfo}
+    <p class="text-gray-500 dark:text-gray-300">
+      {$t('storage_usage', {
+        values: {
+          used: getByteUnitString(usedBytes, $locale),
+          available: getByteUnitString(availableBytes, $locale),
+        },
+      })}
+    </p>
 
-      <div class="mt-4 h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
-        <div class="h-[7px] rounded-full {usageClasses}" style="width: {usedPercentage}%"></div>
-      </div>
-    {:else}
-      <div class="mt-2">
-        <LoadingSpinner />
-      </div>
-    {/if}
-  </div>
+    <div class="mt-4 h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
+      <div class="h-[7px] rounded-full {usageClasses}" style="width: {usedPercentage}%"></div>
+    </div>
+  {:else}
+    <div class="mt-2">
+      <LoadingSpinner />
+    </div>
+  {/if}
 </div>