Layout tweaks, copy buttons

src/components/TailwindColors.tsx

@@ -46,36 +46,41 @@ export function TailwindColors({ onColorSelect, selectedColor }: TailwindColorsP
   }
 
   return (
-    <div className="w-full overflow-x-auto">
-      <div className="grid grid-cols-[auto_repeat(11,minmax(32px,1fr))] gap-1.5">
-        {/* Color rows */}
-        {orderedColors.map(colorName => (
-          <React.Fragment key={colorName}>
-            <div className="flex sticky left-0 z-10 bg-white text-sm font-medium items-center justify-end text-gray-900 py-1 pr-3 whitespace-nowrap border-r border-gray-100">
-              {colorName}
-            </div>
-            {shades.map(shade => {
-              const values = TAILWIND_COLORS[colorName][shade]
-              const hexColor = typeof values === 'string' ? values : values.hex
-              const textColorClass = getTextColor(hexColor)
+    <div className="h-full flex flex-col">
+      <div className="text-sm font-medium text-gray-500 mb-2 px-2">
+        Tailwind Color Reference
+      </div>
+      <div className="flex-1 overflow-x-auto overflow-y-auto">
+        <div className="grid grid-cols-[auto_repeat(11,minmax(32px,1fr))] gap-1.5 p-2">
+          {/* Color rows */}
+          {orderedColors.map(colorName => (
+            <React.Fragment key={colorName}>
+              <div className="flex sticky left-0 z-10 bg-white text-sm font-medium items-center justify-end text-gray-900 py-1 pr-3 whitespace-nowrap border-r border-gray-100">
+                {colorName}
+              </div>
+              {shades.map(shade => {
+                const values = TAILWIND_COLORS[colorName][shade]
+                const hexColor = typeof values === 'string' ? values : values.hex
+                const textColorClass = getTextColor(hexColor)
 
-              return (
-                <button
-                  key={`${colorName}-${shade}`}
-                  onClick={() => onColorSelect(hexColor)}
-                  className={`aspect-square transition-all hover:scale-110 hover:z-10 hover:shadow-lg hover:ring-2 hover:ring-offset-2 hover:ring-indigo-600 relative
-                    ${selectedColor === hexColor ? 'ring-2 ring-offset-2 ring-indigo-600 z-10 shadow-lg' : 'shadow-sm ring-1 ring-inset ring-gray-900/5'}`}
-                  style={{ backgroundColor: hexColor }}
-                  title={`${colorName}-${shade}: ${hexColor}`}
-                >
-                  <span className={`absolute inset-0 flex items-center justify-center text-xs font-medium ${textColorClass}`}>
-                    {shade}
-                  </span>
-                </button>
-              )
-            })}
-          </React.Fragment>
-        ))}
+                return (
+                  <button
+                    key={`${colorName}-${shade}`}
+                    onClick={() => onColorSelect(hexColor)}
+                    className={`aspect-square transition-all hover:scale-110 hover:z-10 hover:shadow-lg relative
+                      ${selectedColor === hexColor ? 'ring-2 ring-offset-0 ring-indigo-600 z-10 shadow-lg' : 'shadow-sm ring-1 ring-inset ring-gray-900/5'}`}
+                    style={{ backgroundColor: hexColor }}
+                    title={`${colorName}-${shade}`}
+                  >
+                    <span className={`absolute inset-0 flex items-center justify-center text-xs font-medium ${textColorClass}`}>
+                      {shade}
+                    </span>
+                  </button>
+                )
+              })}
+            </React.Fragment>
+          ))}
+        </div>
       </div>
     </div>
   )