enhancement: update responsive setting and my model page

web/screens/Settings/Advanced/index.tsx

@@ -80,7 +80,7 @@
   const selectedGpu = gpuList
     .filter((x) => gpusInUse.includes(x.id))
     .map((y) => {
       return y['name']
     })
 
   /**
@@ -89,7 +89,7 @@
    * there is also a case where state update persist everytime user type in the input
    */
   const updatePullOptions = useDebouncedCallback(
     () => configurePullOptions(),
     300
   )
 
@@ -104,10 +104,10 @@
     relaunch: boolean = true
   ) => {
     const appConfiguration: AppConfiguration =
       await window.core?.api?.getAppConfigurations()
     appConfiguration.quick_ask = e
     await window.core?.api?.updateAppConfiguration(appConfiguration)
     if (relaunch) window.core?.api?.relaunch()
   }
 
   /**
@@ -117,15 +117,15 @@
    * @returns void
    */
   const updateVulkanEnabled = async (e: boolean, relaunch: boolean = true) => {
     toaster({
       title: 'Reload',
       description: 'Vulkan settings updated. Reload now to apply the changes.',
     })
     stopModel()
     setVulkanEnabled(e)
     await saveSettings({ vulkan: e, gpusInUse: [] })
     // Relaunch to apply settings
     if (relaunch) window.location.reload()
   }
 
   /**
@@ -171,25 +171,25 @@
    * @returns
    */
   const handleGPUChange = async (gpuId: string) => {
     let updatedGpusInUse = [...gpusInUse]
     if (updatedGpusInUse.includes(gpuId)) {
       updatedGpusInUse = updatedGpusInUse.filter((id) => id !== gpuId)
       if (
         gpuEnabled &&
         updatedGpusInUse.length === 0 &&
         gpuId &&
         gpuId.trim()
       ) {
         // Vulkan support only allow 1 active device at a time
         if (vulkanEnabled) {
           updatedGpusInUse = []
         }
         updatedGpusInUse.push(gpuId)
       }
     } else {
       // Vulkan support only allow 1 active device at a time
       if (vulkanEnabled) {
         updatedGpusInUse = []
       }
       if (gpuId && gpuId.trim()) updatedGpusInUse.push(gpuId)
     }
@@ -212,8 +212,8 @@
     <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 @@
               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 @@
 
         {/* 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>

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}