From daf770032c2ee9828bbb7ba664ba10bfd0ea8a02 Mon Sep 17 00:00:00 2001
From: slegarraga <64795732+slegarraga@users.noreply.github.com>
Date: Fri, 20 Feb 2026 22:54:35 -0300
Subject: [PATCH] fix(web): prevent focus outlines from being clipped in
 sidebars

Add start padding (ps-1) to sidebar content wrappers so that
focus-visible outlines on NavbarItem links are not clipped by
the parent container's overflow.

The NavbarItem component renders links with rounded-e-full styling
that sit flush against the left edge of the scrollable sidebar.
When focused, the browser's outline extends outside the element
boundary and gets clipped by the overflow-auto on the sidebar's
scroll container. Adding 4px of start padding provides space
for the outline to render fully.

Applied to both the admin sidebar (AdminPageLayout) and the user
sidebar (sidebar.svelte) for consistency.

Fixes #19498
---
 web/src/lib/components/layouts/AdminPageLayout.svelte | 2 +-
 web/src/lib/components/sidebar/sidebar.svelte         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/layouts/AdminPageLayout.svelte b/web/src/lib/components/layouts/AdminPageLayout.svelte
index f38675c47e205..9bc413e64cb2c 100644
--- a/web/src/lib/components/layouts/AdminPageLayout.svelte
+++ b/web/src/lib/components/layouts/AdminPageLayout.svelte
@@ -27,7 +27,7 @@
     bind:open={sidebarStore.isOpen}
     class="border-none shadow-none h-full flex flex-col justify-between gap-2"
   >
-    <div class="flex flex-col pt-8 pe-4 gap-1">
+    <div class="flex flex-col pt-8 ps-1 pe-4 gap-1">
       <NavbarItem title={$t('users')} href={Route.users()} icon={mdiAccountMultipleOutline} />
       <NavbarItem title={$t('external_libraries')} href={Route.libraries()} icon={mdiBookshelf} />
       <NavbarItem title={$t('admin.queues')} href={Route.queues()} icon={mdiTrayFull} />
diff --git a/web/src/lib/components/sidebar/sidebar.svelte b/web/src/lib/components/sidebar/sidebar.svelte
index 9630b6c0245bc..d6242f0a5e193 100644
--- a/web/src/lib/components/sidebar/sidebar.svelte
+++ b/web/src/lib/components/sidebar/sidebar.svelte
@@ -45,7 +45,7 @@
   use:clickOutside={{ onOutclick: closeSidebar, onEscape: closeSidebar }}
   use:focusTrap={{ active: isExpanded }}
 >
-  <div class="pe-6 flex flex-col gap-1 h-max min-h-full">
+  <div class="ps-1 pe-6 flex flex-col gap-1 h-max min-h-full">
     {@render children?.()}
   </div>
 </nav>