From be6de587c5d7da1dd4b0dafdf7788d51439cba04 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Tue, 28 Jan 2025 21:45:20 +0700
Subject: [PATCH] enhancement: update responsive setting and my model page
 (#4533)

---
 web/screens/Settings/Advanced/index.tsx | 18 ++++++++++--------
 web/screens/Settings/MyModels/index.tsx |  2 +-
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/web/screens/Settings/Advanced/index.tsx b/web/screens/Settings/Advanced/index.tsx
index df6db2d2b..66240c028 100644
--- a/web/screens/Settings/Advanced/index.tsx
+++ b/web/screens/Settings/Advanced/index.tsx
@@ -212,8 +212,8 @@ const Advanced = ({ setSubdir }: { setSubdir: (subdir: string) => void }) => {
     <ScrollArea className="h-full w-full px-4">
       <div className="block w-full py-4">
         {/* Experimental */}
-        <div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
-          <div className="flex-shrink-0 space-y-1">
+        <div className="flex w-full flex-row items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none">
+          <div className="space-y-1">
             <div className="flex gap-x-2">
               <h6 className="font-semibold capitalize">Experimental Mode</h6>
             </div>
@@ -222,11 +222,13 @@ const Advanced = ({ setSubdir }: { setSubdir: (subdir: string) => void }) => {
               performance. Enable with caution.
             </p>
           </div>
-          <Switch
-            data-testid="experimental-switch"
-            checked={experimentalEnabled}
-            onChange={updateExperimentalEnabled}
-          />
+          <div className="flex-shrink-0">
+            <Switch
+              data-testid="experimental-switch"
+              checked={experimentalEnabled}
+              onChange={updateExperimentalEnabled}
+            />
+          </div>
         </div>
 
         {/* CPU / GPU switching */}
@@ -428,7 +430,7 @@ const Advanced = ({ setSubdir }: { setSubdir: (subdir: string) => void }) => {
 
         {/* Proxy Settings Link */}
         <div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
-          <div className="flex w-full cursor-pointer items-center justify-between">
+          <div className="flex w-full cursor-pointer items-start justify-between">
             <div className="space-y-1">
               <div className="flex gap-x-2">
                 <h6 className="font-semibold capitalize">HTTPS Proxy</h6>
diff --git a/web/screens/Settings/MyModels/index.tsx b/web/screens/Settings/MyModels/index.tsx
index e4d1b9c47..492d03145 100644
--- a/web/screens/Settings/MyModels/index.tsx
+++ b/web/screens/Settings/MyModels/index.tsx
@@ -187,7 +187,7 @@ const MyModels = () => {
 
                 return (
                   <div className="my-6" key={i}>
-                    <div className="flex flex-col items-start justify-start gap-2 sm:flex-row sm:items-center sm:justify-between">
+                    <div className="flex flex-row items-center justify-between gap-2">
                       <div
                         className="mb-1 mt-3 flex cursor-pointer items-center gap-2"
                         onClick={onClickChevron}