From da6deb2ee126a70a4e5ece1969e1564069ac0353 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Mon, 12 Aug 2024 21:50:08 +0700
Subject: [PATCH] fix: responsive my model (#176)

---
 src/pages/models.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/models.tsx b/src/pages/models.tsx
index 478d7de..3c40d34 100644
--- a/src/pages/models.tsx
+++ b/src/pages/models.tsx
@@ -139,7 +139,7 @@ const ModelsPage = () => {
             <SelectTrigger className="w-[180px] placeholder:text-red-200 font-semibold">
               <SelectValue placeholder="Select a Engine" />
             </SelectTrigger>
-            <SelectContent>
+            <SelectContent className="dark:bg-neutral-900 bg-white">
               <SelectItem className="font-semibold" value="gguf">
                 GGUF
               </SelectItem>
@@ -171,9 +171,9 @@ const ModelsPage = () => {
               return (
                 <div
                   key={model.id}
-                  className="flex justify-between items-center py-4 border-b border-neutral-200 dark:border-neutral-700 last:border-none"
+                  className="flex justify-between md:items-center py-4 border-b border-neutral-200 dark:border-neutral-700 last:border-none flex-col md:flex-row"
                 >
-                  <div className="flex flex-col lg:flex-row lg:items-center gap-4">
+                  <div className="flex flex-col md:flex-row gap-4">
                     <Link
                       to={`https://huggingface.co/${model.name}`}
                       target="_blank"
@@ -191,7 +191,7 @@ const ModelsPage = () => {
                   </div>
 
                   <div className="flex items-center gap-2">
-                    <div className="bg-neutral-100 flex items-center py-1 h-10 px-4 rounded-lg font-medium dark:bg-neutral-800 text-black dark:text-white hover:no-underline !cursor-pointer w-[340px]">
+                    <div className="bg-neutral-100 flex items-center py-1 h-10 px-4 rounded-lg font-medium dark:bg-neutral-800 text-black dark:text-white hover:no-underline !cursor-pointer w-full md:w-[340px]">
                       <code className="bg-transparent border-none text-left line-clamp-1">
                         {checkedItems.length > 0
                           ? `cortex run ${model.name.replace(