gmakstutis/ragflow
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: input left and right padding not fit when have prefix or suffix icon

Browse source
This commit is contained in:
Jimmy Ben Klieve 2025-11-20 19:23:56 +08:00
parent d3d2ccc76c
commit 726423a02c
2 changed files with 7 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
web/src/components/ui/input.tsx
View file

@ -46,9 +46,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent-primary',
'disabled:cursor-not-allowed disabled:opacity-50 transition-colors',
{
'pl-12': !!prefix,
'pr-12': !!suffix || isPasswordInput,
'pr-24': !!suffix && isPasswordInput,
'pl-[calc(1em+1.25rem)]': !!prefix,
'pr-[calc(1em+1.25rem)]': !!suffix || isPasswordInput,
'pr-[calc(2em+2rem)]': !!suffix && isPasswordInput,
},
className,
)}

13
web/src/pages/admin/components/theme-switch.tsx
View file

@ -25,8 +25,8 @@ const ThemeSwitch = forwardRef<
setTheme(value ? ThemeEnum.Dark : ThemeEnum.Light)
}
>
<div className="self-center p-3 py-2 rounded-full bg-bg-card transition-[background-color] duration-300">
<div className="h-full flex items-center justify-between gap-4 relative z-[1] text-text-disabled transition-[text-color] duration-300 delay-75">
<div className="self-center p-3 py-2 rounded-full bg-bg-card transition-[background-color]">
<div className="h-full flex items-center justify-between gap-4 relative z-[1] text-text-disabled transition-[text-color]">
<LucideSun
className={cn('size-[1em]', !isDark && 'text-text-primary')}
/>
@ -39,7 +39,7 @@ const ThemeSwitch = forwardRef<
<Thumb
className={cn(
'absolute top-0 left-0 w-[calc(50%+.25rem)] p-0.5 h-full rounded-full overflow-hidden',
'transition-all ease-out duration-300',
'transition-all ease-out',
'group-hover/theme-switch:w-[calc(50%+.66rem)] group-focus-visible/theme-switch:w-[calc(50%+.66rem)]',
{
'left-[calc(50%-.25rem)] group-hover/theme-switch:left-[calc(50%-.66rem)] group-focus-visible/theme-switch:left-[calc(50%-.66rem)]':
@ -47,12 +47,7 @@ const ThemeSwitch = forwardRef<
},
)}
>
<div
className="
size-full rounded-full bg-bg-base shadow-md
transition-colors ease-out duration-300 delay-75
"
/>
<div className="size-full rounded-full bg-bg-base shadow-md transition-colors ease-out" />
</Thumb>
</Root>
);