fix: api playground text overlap button and search hub model

joi/src/core/Tabs/styles.scss

@@ -35,6 +35,7 @@
     flex: 1;
     height: 38px;
     display: flex;
+    white-space: nowrap;
     color: hsla(var(--text-secondary));
     align-items: center;
     justify-content: center;

web/screens/Hub/index.tsx

@@ -96,17 +96,19 @@ const HubScreen = () => {
           {!filteredModels.length ? (
             <BlankState title="No search results found" />
           ) : (
-            <div className="mb-4 flex w-full justify-end">
-              <Select
-                value={sortSelected}
-                onValueChange={(value) => {
-                  setSortSelected(value)
-                }}
-                options={sortMenus}
-              />
-            </div>
+            <>
+              <div className="mb-4 flex w-full justify-end">
+                <Select
+                  value={sortSelected}
+                  onValueChange={(value) => {
+                    setSortSelected(value)
+                  }}
+                  options={sortMenus}
+                />
+              </div>
+              <ModelList models={filteredModels} />
+            </>
           )}
-          <ModelList models={filteredModels} />
         </div>
       </ScrollArea>
     </CenterPanelContainer>

web/screens/LocalServer/LocalServerLeftPanel/index.tsx

@@ -127,9 +127,10 @@ const LocalServerLeftPanel = () => {
               {serverEnabled ? 'Stop' : 'Start'} Server
             </Button>
             {serverEnabled && (
-              <Button variant="soft" asChild>
+              <Button variant="soft" asChild className="whitespace-nowrap">
                 <a href={`http://localhost:${port}`} target="_blank">
-                  API Playground <ExternalLinkIcon size={20} className="ml-2" />
+                  <span>API Playground</span>{' '}
+                  <ExternalLinkIcon size={20} className="ml-2" />
                 </a>
               </Button>
             )}

web/screens/Settings/Advanced/index.tsx

@@ -75,7 +75,7 @@
   const selectedGpu = gpuList
     .filter((x) => gpusInUse.includes(x.id))
     .map((y) => {
       return y['name']
     })
 
   /**
@@ -88,7 +88,7 @@
       if (value.trim().startsWith('http')) {
         setProxy(value.trim())
       } else {
         setProxy('')
       }
     },
     [setPartialProxy, setProxy]
@@ -105,10 +105,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()
   }
 
   /**
@@ -118,15 +118,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()
   }
 
   /**
@@ -174,7 +174,7 @@
     try {
       await fs.rm(`file://logs`)
     } catch (err) {
       console.error('Error clearing logs: ', err)
     }
 
     toaster({
@@ -190,15 +190,15 @@
    * @returns
    */
   const handleGPUChange = (gpuId: string) => {
     let updatedGpusInUse = [...gpusInUse]
     if (updatedGpusInUse.includes(gpuId)) {
       updatedGpusInUse = updatedGpusInUse.filter((id) => id !== gpuId)
       if (gpuEnabled && updatedGpusInUse.length === 0) {
         // 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
@@ -211,9 +211,6 @@
     saveSettings({ gpusInUse: updatedGpusInUse })
   }
 
-  const gpuSelectionPlaceHolder =
-    gpuList.length > 0 ? 'Select GPU' : "You don't have any compatible GPU"
-
   /**
    * Handle click outside
    */
@@ -240,7 +237,7 @@
         </div>
 
         {/* CPU / GPU switching */}
-        {!isMac && (
+        {!isMac && gpuList.length > 0 && (
           <div className="flex w-full flex-col items-start justify-between border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none">
             <div className="flex w-full items-start justify-between">
               <div className="space-y-1">
@@ -326,7 +323,7 @@
                   value={selectedGpu.join() || ''}
                   className="w-full cursor-pointer"
                   readOnly
-                  placeholder={gpuSelectionPlaceHolder}
+                  placeholder=""
                   suffixIcon={
                     <ChevronDownIcon
                       size={14}