chore: correct CSS of extension settings

janhq · Jan 7, 2025 · 09dacef · 09dacef
1 parent 6afec69
commit 09dacef
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/core/src/types/setting/settingComponent.ts b/core/src/types/setting/settingComponent.ts
@@ -35,7 +35,7 @@ export type InputType =
 const InputActions = ['unobscure', 'copy'] as const
 export type InputActionsTuple = typeof InputActions
 export type InputAction = InputActionsTuple[number]
-export type DropdownOption = { label: string; value: string }
+export type DropdownOption = { name: string; value: string }
 
 export type InputComponentProps = {
   placeholder: string

diff --git a/extensions/inference-cortex-extension/resources/default_settings.json b/extensions/inference-cortex-extension/resources/default_settings.json
@@ -15,7 +15,9 @@
     "controllerType": "input",
     "controllerProps": {
       "value": "4",
-      "placeholder": "4"
+      "placeholder": "4",
+      "type": "number",
+      "textAlign": "right"
     }
   },
   {
@@ -25,7 +27,9 @@
     "controllerType": "input",
     "controllerProps": {
       "value": "",
-      "placeholder": "Number of CPU threads"
+      "placeholder": "Number of CPU threads",
+      "type": "number",
+      "textAlign": "right"
     }
   },
   {

diff --git a/web/screens/Settings/SettingDetail/SettingDetailItem/SettingDetailTextInputItem/index.tsx b/web/screens/Settings/SettingDetail/SettingDetailItem/SettingDetailTextInputItem/index.tsx
@@ -15,6 +15,7 @@ import {
   FolderOpenIcon,
 } from 'lucide-react'
 import { Marked, Renderer } from 'marked'
+import { twMerge } from 'tailwind-merge'
 
 type Props = {
   settingProps: SettingComponentProps
@@ -83,21 +84,28 @@ const SettingDetailTextInputItem = ({
           className="font-medium leading-relaxed text-[hsla(var(--text-secondary))]"
         />
       </div>
-      <div className="w-full flex-shrink-0 pr-1 sm:w-1/2">
+      <div
+        className={twMerge(
+          'w-full flex-shrink-0 pr-1 sm:w-1/2',
+          type === 'number' && 'sm:w-22 w-24'
+        )}
+      >
         <Input
           placeholder={placeholder}
           type={obscure ? 'password' : 'text'}
           textAlign={textAlign}
           value={value}
           onChange={(e) => onValueChanged?.(e.target.value)}
-          className="!pr-20"
+          className={twMerge(obscure && '!pr-20')}
           suffixIcon={
-            <InputExtraActions
-              actions={inputActions ?? []}
-              onAction={onAction}
-              copied={copied}
-              obscure={obscure}
-            />
+            obscure ? (
+              <InputExtraActions
+                actions={inputActions ?? []}
+                onAction={onAction}
+                copied={copied}
+                obscure={obscure}
+              />
+            ) : undefined
           }
         />
       </div>