fix: enhance several minor UI (#3706)

This commit is contained in:
Faisal Amir 2024-09-20 10:06:37 +07:00 committed by GitHub
parent 194093d95d
commit 1aefb8f7ab
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 14 additions and 11 deletions

View File

@ -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)

View File

@ -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}

View File

@ -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">

View File

@ -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 ? (

View File

@ -79,6 +79,7 @@ const SettingDetailTextInputItem = ({
textAlign={textAlign}
value={value}
onChange={(e) => onValueChanged?.(e.target.value)}
className="!pr-20"
suffixIcon={
<InputExtraActions
actions={inputActions ?? []}