From 4a7f154b4f275c448beb6b72c082ddbcf808de35 Mon Sep 17 00:00:00 2001
From: Rodrigo Luglio <rodrigo@rlabs.com.br>
Date: Mon, 14 Oct 2024 08:05:06 -0300
Subject: [PATCH] responsive adjusts to generator

---
 src/components/SyntaxColorList.tsx | 4 ++--
 src/components/ThemeGenerator.tsx  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/SyntaxColorList.tsx b/src/components/SyntaxColorList.tsx
index ac15363..b9d8b14 100644
--- a/src/components/SyntaxColorList.tsx
+++ b/src/components/SyntaxColorList.tsx
@@ -67,7 +67,7 @@ const ColorList: React.FC<ColorListProps> = ({ title, isThemeColors }) => {
           Unlock All
         </Button>
       </div>
-      <div className="grid grid-cols-1 md:grid-rows-4 md:grid-flow-col md:auto-cols-auto gap-3 w-full">
+      <div className="grid grid-cols-1 md:grid-rows-4 md:grid-flow-col auto-cols-fr gap-3 w-full">
         {Object.entries(displayColors).map(([key, value]) => (
           <div
             key={key}
@@ -90,7 +90,7 @@ const ColorList: React.FC<ColorListProps> = ({ title, isThemeColors }) => {
               >
                 {key}
               </h3>
-              <div>
+              <div className="flex gap-2">
                 <Button
                   variant="ghost"
                   size="icon"
diff --git a/src/components/ThemeGenerator.tsx b/src/components/ThemeGenerator.tsx
index 813cee9..3d115e3 100644
--- a/src/components/ThemeGenerator.tsx
+++ b/src/components/ThemeGenerator.tsx
@@ -42,7 +42,7 @@ export const ThemeGenerator = () => {
     <section>
       <div className="mx-auto p-4 flex flex-col gap-5">
         <div className="flex flex-wrap lg:flex-nowrap gap-6">
-          <div className="flex flex-col items-center justify-between flex-shrink">
+          <div className="flex flex-col items-center justify-between w-full md:w-auto">
             <div className="flex flex-col items-center flex-1 gap-6">
               <ThemeControls />
               <div className="">
@@ -53,7 +53,7 @@ export const ThemeGenerator = () => {
           <div className="flex-1">
             <ThemePreview />
           </div>
-          <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-6 w-full md:w-auto">
             <ColorList title="Theme Colors" isThemeColors={true} />
             <AnsiColorList />
           </div>