From 82bd94de57828ad35726066cac991eaa3b3c87e4 Mon Sep 17 00:00:00 2001
From: Joshua Ryder <ryderjj89@outlook.com>
Date: Sun, 14 Dec 2025 12:45:29 -0500
Subject: [PATCH] Favorites and color picker fixes

---
 frontend/src/components/FavoritesMenu.tsx   |  2 +-
 frontend/src/components/SectionsManager.tsx | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/FavoritesMenu.tsx b/frontend/src/components/FavoritesMenu.tsx
index 461881b0..8d43289f 100644
--- a/frontend/src/components/FavoritesMenu.tsx
+++ b/frontend/src/components/FavoritesMenu.tsx
@@ -196,7 +196,7 @@ const FavoritesMenu: React.FC<FavoritesMenuProps> = ({
           </div>
         )}
       </button>
-      <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+      <div className="flex items-center gap-1 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity">
         {sections.length > 0 && (
           <div className="relative">
             <button
diff --git a/frontend/src/components/SectionsManager.tsx b/frontend/src/components/SectionsManager.tsx
index 8f3ee5ca..bd3989d0 100644
--- a/frontend/src/components/SectionsManager.tsx
+++ b/frontend/src/components/SectionsManager.tsx
@@ -172,8 +172,8 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
   };
 
   const ColorPicker = ({ selectedColor, onSelect }: { selectedColor: string; onSelect: (color: string) => void }) => (
-    <div className="absolute z-10 mt-2 p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl">
-      <div className="grid grid-cols-6 gap-2">
+    <div className="absolute left-0 z-20 mt-2 p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl">
+      <div className="grid grid-cols-9 gap-1.5">
         {SECTION_COLORS.map(color => (
           <button
             key={color.value}
@@ -181,10 +181,10 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
               onSelect(color.value);
               setShowColorPicker(null);
             }}
-            className={`w-8 h-8 rounded-full transition-all ${
+            className={`w-6 h-6 rounded-full transition-all flex-shrink-0 ${
               selectedColor === color.value
-                ? 'ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-800'
-                : 'hover:scale-110'
+                ? 'ring-2 ring-blue-500 ring-offset-1 dark:ring-offset-gray-800 scale-110'
+                : 'hover:scale-110 active:scale-95'
             }`}
             style={{ backgroundColor: color.value }}
             title={color.name}