From 7defccb009bcfe4d96e54fa55bd61be72e8b4132 Mon Sep 17 00:00:00 2001
From: Matt <mattskent@gmail.com>
Date: Tue, 11 Feb 2025 10:15:35 -0500
Subject: [PATCH] Better mobile layout

---
 src/App.tsx                       |  1 +
 src/components/ColorPicker.tsx    | 56 ++++++++++++++++++-------------
 src/components/TailwindColors.tsx |  7 ++--
 3 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index e13d95f..09767df 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,5 @@
 import { ColorPicker } from './components/ColorPicker'
+import { ColorPickerVertical } from './components/ColorPickerVertical'
 
 function App() {
   return (
diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx
index 2081a93..0cb32c6 100644
--- a/src/components/ColorPicker.tsx
+++ b/src/components/ColorPicker.tsx
@@ -139,27 +139,26 @@ export function ColorPicker() {
   }
 
   return (
-    <div className="w-full max-w-7xl mx-auto p-6">
-      <div className="text-center space-y-2 mb-8">
+    <div className="w-full max-w-7xl mx-auto p-4 md:p-2 lg:p-6 !pt-6">
+      <div className="text-center space-y-2 mb-4 lg:mb-6">
         <h1 className="text-4xl font-bold tracking-tight text-gray-900">Color Picker</h1>
-        <p className="text-lg text-gray-600">Find and convert colors in different formats</p>
       </div>
       
-      <div className="grid grid-cols-1 lg:grid-cols-[1fr_2fr] gap-8 min-h-[600px]">
+      <div className="flex flex-col h-full gap-4 md:gap-2 lg:gap-6 sm:grid sm:grid-cols-[1fr_2fr]">
         {/* Left Column: Color Picker and Input */}
         <div className="h-full">
           <div className="bg-white rounded-xl shadow-sm ring-1 ring-gray-900/5 p-6 h-full">
-            <div className="space-y-6">
-              {/* Color Preview */}
-              <div className="flex flex-col items-center gap-4">
+            <div className="flex flex-row gap-4 sm:flex-col sm:gap-6 justify-between">
+              {/* Color Preview and Picker */}
+              <div className="flex flex-col items-center justify-center gap-4">
                 <div 
-                  className="w-32 h-32 rounded-lg shadow-lg ring-1 ring-gray-900/5"
+                  className="mt-1 sm:mt-0 w-32 h-32 rounded-lg shadow-lg ring-1 ring-gray-900/5"
                   style={{ backgroundColor: color }}
                 />
                 
                 <div className="text-sm text-gray-600 text-center">
-                  <div className="flex items-center justify-center gap-1.5">
-                    <SwatchIcon className="h-4 w-4" />
+                  <div className="flex items-center justify-center gap-1.5 ">
+                    <SwatchIcon className="h-4 w-4 hidden sm:block" />
                     {closestTailwind.isExactMatch ? (
                       <span>Tailwind: <span className="font-medium text-gray-900">{closestTailwind.name}</span></span>
                     ) : (
@@ -167,15 +166,26 @@ export function ColorPicker() {
                     )}
                   </div>
                 </div>
-              </div>
 
-              {/* Color Picker */}
-              <div className="w-full max-w-[200px] mx-auto">
-                <HexColorPicker color={color} onChange={setColor} />
+                {/* Color Picker */}
+                <div className="sm:hidden">
+                  <HexColorPicker 
+                    color={color} 
+                    onChange={setColor} 
+                    style={{ width: '150px', height: '150px' }} 
+                  />
+                </div>
+                <div className="hidden sm:block">
+                  <HexColorPicker 
+                    color={color} 
+                    onChange={setColor} 
+                    style={{ width: '200px', height: '200px' }} 
+                  />
+                </div>
               </div>
 
               {/* Color Format Inputs */}
-              <div className="space-y-3">
+              <div className="space-y-2 sm:space-y-3">
                 <div>
                   <label htmlFor="hex-value" className="block text-sm font-medium text-gray-700 mb-1">
                     HEX
@@ -186,7 +196,7 @@ export function ColorPicker() {
                       id="hex-value"
                       value={colorValues.hex}
                       onChange={(e) => handleInputChange(e.target.value, 'hex')}
-                      className="block w-full rounded-md border-0 py-1.5 px-3 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                      className="block w-full text-sm sm:text-baserounded-md border-0 py-1.5 px-3 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                     />
                     <CopyButton value={colorValues.hex} fieldId="hex" />
                   </div>
@@ -202,7 +212,7 @@ export function ColorPicker() {
                       id="rgb-value"
                       value={colorValues.rgb}
                       onChange={(e) => handleInputChange(e.target.value, 'rgb')}
-                      className="block w-full rounded-md border-0 py-1.5 px-3 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                      className="block w-full text-sm sm:text-base rounded-md border-0 py-1.5 px-3 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                     />
                     <CopyButton value={colorValues.rgb} fieldId="rgb" />
                   </div>
@@ -218,7 +228,7 @@ export function ColorPicker() {
                       id="hsl-value"
                       value={colorValues.hsl}
                       onChange={(e) => handleInputChange(e.target.value, 'hsl')}
-                      className="block w-full rounded-md border-0 py-1.5 px-3 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                      className="block w-full text-sm sm:text-base rounded-md border-0 py-1.5 px-3 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                     />
                     <CopyButton value={colorValues.hsl} fieldId="hsl" />
                   </div>
@@ -234,7 +244,7 @@ export function ColorPicker() {
                       id="hsb-value"
                       value={colorValues.hsb}
                       onChange={(e) => handleInputChange(e.target.value, 'hsb')}
-                      className="block w-full rounded-md border-0 py-1.5 px-3 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                      className="block w-full text-sm sm:text-base rounded-md border-0 py-1.5 px-3 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                     />
                     <CopyButton value={colorValues.hsb} fieldId="hsb" />
                   </div>
@@ -250,7 +260,7 @@ export function ColorPicker() {
                       id="oklch-value"
                       value={colorValues.oklch}
                       onChange={(e) => handleInputChange(e.target.value, 'oklch')}
-                      className="block w-full rounded-md border-0 py-1.5 px-3 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                      className="block w-full text-sm sm:text-base rounded-md border-0 py-1.5 px-3 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                     />
                     <CopyButton value={colorValues.oklch} fieldId="oklch" />
                   </div>
@@ -266,7 +276,7 @@ export function ColorPicker() {
                       id="tailwind-value"
                       value={colorValues.tailwind}
                       readOnly
-                      className="block w-full rounded-md border-0 py-1.5 px-3 pr-10 text-gray-900 bg-gray-50 shadow-sm ring-1 ring-inset ring-gray-300 sm:text-sm sm:leading-6"
+                      className="block w-full text-sm sm:text-base rounded-md border-0 py-1.5 px-3 pr-10 text-gray-900 bg-gray-50 shadow-sm ring-1 ring-inset ring-gray-300 sm:text-sm sm:leading-6"
                     />
                     <CopyButton value={colorValues.tailwind} fieldId="tailwind" />
                   </div>
@@ -277,8 +287,8 @@ export function ColorPicker() {
         </div>
 
         {/* Right Column: Tailwind Colors */}
-        <div className="h-full">
-          <div className="bg-white rounded-xl shadow-sm ring-1 ring-gray-900/5 p-4 h-full">
+        <div className="h-full lg:max-w-[65vw] max-w-full">
+          <div className="bg-white rounded-xl shadow-sm ring-1 ring-gray-900/5 p-2 sm:p-4 h-full">
             <TailwindColors 
               onColorSelect={(selectedColor) => {
                 // Always set the hex color for the color picker
diff --git a/src/components/TailwindColors.tsx b/src/components/TailwindColors.tsx
index 2343104..0ac88cd 100644
--- a/src/components/TailwindColors.tsx
+++ b/src/components/TailwindColors.tsx
@@ -46,16 +46,13 @@ export function TailwindColors({ onColorSelect, selectedColor }: TailwindColorsP
   }
 
   return (
-    <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="h-full flex flex-col w-[90vw] sm:w-full">
       <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">
+              <div className="flex sticky left-0 z-10 bg-white text-sm md:text-xs lg: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 => {