fix badge responsive on mobile

janhq · Oct 4, 2024 · 8820d90 · 8820d90
1 parent 8bb83e2
commit 8820d90
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/src/components/Home/Customizable/index.tsx b/src/components/Home/Customizable/index.tsx
@@ -18,10 +18,12 @@ const Customizable = () => {
       <div className="flex gap-4 flex-col lg:flex-row mt-10 ">
         <div className="w-full lg:w-1/2 border border-neutral-200 rounded-2xl dark:border-neutral-800">
           <div className="p-6">
-            <div className="flex gap-2 items-center">
+            <div className="flex flex-col lg:flex-row gap-2 lg:items-center">
               <h1 className="text-2xl font-medium">Assistants & Memory</h1>
-              <div className="font-medium text-sm bg-blue-100 rounded-lg px-2 py-1 text-blue-700">
-                Coming Soon
+              <div className="flex">
+                <div className="font-medium text-sm bg-blue-100 rounded-lg px-2 py-1 text-blue-700">
+                  Coming Soon
+                </div>
               </div>
             </div>
             <p className="text-lg mt-4 text-black/60 dark:text-white/60">

diff --git a/src/components/Home/Feature/index.tsx b/src/components/Home/Feature/index.tsx
@@ -70,11 +70,13 @@ const Feature = () => {
                         0{i + 1}
                       </h1>
                       <div>
-                        <div className="flex items-center gap-x-2">
+                        <div className="flex flex-col lg:flex-row lg:items-center gap-x-2">
                           <h6 className="text-xl font-bold">{feature.title}</h6>
                           {feature.experimantal && (
-                            <div className="font-medium text-sm bg-blue-100 rounded-lg px-2 py-1 text-blue-700">
-                              Experimental
+                            <div className="flex mt-2 lg:mt-0">
+                              <div className="font-medium text-sm bg-blue-100 rounded-lg px-2 py-1 text-blue-700">
+                                Experimental
+                              </div>
                             </div>
                           )}
                         </div>