From a77971e58e46651aba4bfd4b3778d03d8b067059 Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Thu, 11 Jun 2026 11:52:55 -0400
Subject: [PATCH] style(MediaBrowser, MediaEntry, MediaManager): enhance button
 styles for improved aesthetics and interaction

---
 src/app/components/MediaBrowser.tsx | 2 +-
 src/app/components/MediaEntry.tsx   | 2 +-
 src/app/components/MediaManager.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/components/MediaBrowser.tsx b/src/app/components/MediaBrowser.tsx
index fd35a66..ab3ff60 100644
--- a/src/app/components/MediaBrowser.tsx
+++ b/src/app/components/MediaBrowser.tsx
@@ -193,7 +193,7 @@ export default function MediaBrowser({ currentPath, onSelect, onClose }: MediaBr
           {!loading && !error && path !== null && (
             <>
               {path !== '/' && (
-                <button onClick={navigateUp} className="w-full px-4 py-3 flex items-center gap-3 hover:bg-neutral-50 border-b border-neutral-100 text-left">
+                <button onClick={navigateUp} className="w-full pl-[14px] pr-4 py-3 flex items-center gap-3 border-b border-neutral-100 border-l-2 border-l-transparent transition-colors hover:bg-blue-50 hover:border-l-blue-400 text-left">
                   <ArrowLeft className="w-5 h-5 text-neutral-400" />
                   <span className="text-neutral-600">..</span>
                 </button>
diff --git a/src/app/components/MediaEntry.tsx b/src/app/components/MediaEntry.tsx
index 124f931..54fcc35 100644
--- a/src/app/components/MediaEntry.tsx
+++ b/src/app/components/MediaEntry.tsx
@@ -80,7 +80,7 @@ export function MediaEntry({
   entry, onPrimaryClick, onActionsClick, leftSlot, nameSlot, selected, className,
 }: MediaEntryProps) {
   return (
-    <div className={`px-4 py-3 flex items-center gap-3 border-b border-neutral-100 hover:bg-neutral-50 ${selected ? 'bg-blue-50' : ''} ${className ?? ''}`}>
+    <div className={`pl-[14px] pr-4 py-3 flex items-center gap-3 border-b border-neutral-100 border-l-2 border-l-transparent transition-colors hover:bg-blue-50 hover:border-l-blue-400 ${selected ? 'bg-blue-50 border-l-blue-400' : ''} ${className ?? ''}`}>
       {leftSlot}
       <button className="flex-1 flex items-center gap-3 text-left min-w-0" onClick={onPrimaryClick}>
         <EntryIcon entry={entry} />
diff --git a/src/app/components/MediaManager.tsx b/src/app/components/MediaManager.tsx
index f75aa15..d39980a 100644
--- a/src/app/components/MediaManager.tsx
+++ b/src/app/components/MediaManager.tsx
@@ -1018,7 +1018,7 @@ export default function MediaManager({ initialPath = '/', rootPath, title, confi
             {path !== '/' && (
               <button
                 onClick={navigateUp}
-                className="w-full px-4 py-3 flex items-center gap-3 hover:bg-neutral-50 border-b border-neutral-100 text-left"
+                className="w-full pl-[14px] pr-4 py-3 flex items-center gap-3 border-b border-neutral-100 border-l-2 border-l-transparent transition-colors hover:bg-blue-50 hover:border-l-blue-400 text-left"
               >
                 <div className="w-4 flex-shrink-0" />
                 <ArrowLeft className="w-5 h-5 text-neutral-400 flex-shrink-0" />