responsive adjusts to generator

RLabs-Inc · Oct 14, 2024 · 4a7f154 · 4a7f154
1 parent 457da53
commit 4a7f154
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git 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
@@ -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>