From 1aefb8f7abae2f6d237711d436ed55b001516971 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Fri, 20 Sep 2024 10:06:37 +0700
Subject: [PATCH] fix: enhance several minor UI (#3706)

---
 web/helpers/atoms/Setting.atom.ts                |  2 +-
 web/screens/Settings/Advanced/index.tsx          |  4 ++--
 web/screens/Settings/Appearance/index.tsx        |  2 +-
 .../Settings/MyModels/MyModelList/index.tsx      | 16 +++++++++-------
 .../SettingDetailTextInputItem/index.tsx         |  1 +
 5 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/web/helpers/atoms/Setting.atom.ts b/web/helpers/atoms/Setting.atom.ts
index ced0fbe37..57ca87854 100644
--- a/web/helpers/atoms/Setting.atom.ts
+++ b/web/helpers/atoms/Setting.atom.ts
@@ -19,4 +19,4 @@ export const reduceTransparentAtom = atomWithStorage<boolean>(
   REDUCE_TRANSPARENT,
   false
 )
-export const spellCheckAtom = atomWithStorage<boolean>(SPELL_CHECKING, true)
+export const spellCheckAtom = atomWithStorage<boolean>(SPELL_CHECKING, false)
diff --git a/web/screens/Settings/Advanced/index.tsx b/web/screens/Settings/Advanced/index.tsx
index 1384f5688..2c444371a 100644
--- a/web/screens/Settings/Advanced/index.tsx
+++ b/web/screens/Settings/Advanced/index.tsx
@@ -321,7 +321,7 @@ const Advanced = () => {
               <label className="mb-2 mr-2 inline-block font-medium">
                 Choose device(s)
               </label>
-              <div className="relative flex w-full md:w-1/2" ref={setToggle}>
+              <div className="relative w-full md:w-1/2" ref={setToggle}>
                 <Input
                   value={selectedGpu.join() || ''}
                   className="w-full cursor-pointer"
@@ -337,7 +337,7 @@ const Advanced = () => {
                 />
                 <div
                   className={twMerge(
-                    'absolute right-0 z-20 mt-10 max-h-80 w-full overflow-hidden rounded-lg border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))] shadow-sm',
+                    'absolute right-0 top-0 z-20 mt-10 max-h-80 w-full overflow-hidden rounded-lg border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))] shadow-sm',
                     open ? 'flex' : 'hidden'
                   )}
                   ref={setDropdownOptions}
diff --git a/web/screens/Settings/Appearance/index.tsx b/web/screens/Settings/Appearance/index.tsx
index 393af2e47..2dd7d96a2 100644
--- a/web/screens/Settings/Appearance/index.tsx
+++ b/web/screens/Settings/Appearance/index.tsx
@@ -97,7 +97,7 @@ export default function AppearanceOptions() {
             <h6 className="font-semibold capitalize">Spell Check</h6>
           </div>
           <p className=" font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
-            Toggle to disable spell checking.
+            Turn on to enable spell check
           </p>
         </div>
         <div className="flex-shrink-0">
diff --git a/web/screens/Settings/MyModels/MyModelList/index.tsx b/web/screens/Settings/MyModels/MyModelList/index.tsx
index 88fff73f7..329248923 100644
--- a/web/screens/Settings/MyModels/MyModelList/index.tsx
+++ b/web/screens/Settings/MyModels/MyModelList/index.tsx
@@ -49,11 +49,11 @@ const MyModelList = ({ model }: Props) => {
   return (
     <div className="border border-b-0 border-[hsla(var(--app-border))] bg-[hsla(var(--tertiary-bg))] p-4 first:rounded-t-lg last:rounded-b-lg last:border-b">
       <div className="flex flex-col items-start justify-start gap-4 sm:flex-row sm:items-center sm:justify-between">
-        <div className="flex w-1/2 gap-x-8">
-          <div className="flex w-full items-center justify-between">
+        <div className="flex gap-x-8 lg:w-1/2">
+          <div className="flex h-full w-full flex-col items-start justify-between gap-2 lg:flex-row lg:items-center">
             <h6
               className={twMerge(
-                'line-clamp-1 max-w-[200px] font-medium',
+                'font-medium lg:line-clamp-1 lg:min-w-[280px] lg:max-w-[280px]',
                 model.engine !== InferenceEngine.nitro &&
                   'max-w-none text-[hsla(var(--text-secondary))]'
               )}
@@ -64,7 +64,7 @@ const MyModelList = ({ model }: Props) => {
             {model.engine === InferenceEngine.nitro && (
               <div className="flex gap-x-8">
                 <p
-                  className="line-clamp-1 max-w-[120px] text-[hsla(var(--text-secondary))] xl:max-w-none"
+                  className="line-clamp-1 text-[hsla(var(--text-secondary))] lg:min-w-[160px] lg:max-w-[160px] xl:max-w-none"
                   title={model.id}
                 >
                   {model.id}
@@ -76,9 +76,11 @@ const MyModelList = ({ model }: Props) => {
 
         {localEngines.includes(model.engine) && (
           <div className="flex gap-x-4">
-            <Badge theme="secondary" className="sm:mr-16">
-              {toGibibytes(model.metadata.size)}
-            </Badge>
+            <div className="md:min-w-[90px] md:max-w-[90px]">
+              <Badge theme="secondary" className="sm:mr-8">
+                {toGibibytes(model.metadata.size)}
+              </Badge>
+            </div>
 
             <div className="relative flex items-center gap-x-4">
               {stateModel.loading && stateModel.model?.id === model.id ? (
diff --git a/web/screens/Settings/SettingDetail/SettingDetailItem/SettingDetailTextInputItem/index.tsx b/web/screens/Settings/SettingDetail/SettingDetailItem/SettingDetailTextInputItem/index.tsx
index b6a204e2e..3127f1578 100644
--- a/web/screens/Settings/SettingDetail/SettingDetailItem/SettingDetailTextInputItem/index.tsx
+++ b/web/screens/Settings/SettingDetail/SettingDetailItem/SettingDetailTextInputItem/index.tsx
@@ -79,6 +79,7 @@ const SettingDetailTextInputItem = ({
           textAlign={textAlign}
           value={value}
           onChange={(e) => onValueChanged?.(e.target.value)}
+          className="!pr-20"
           suffixIcon={
             <InputExtraActions
               actions={inputActions ?? []}