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', 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent-primary',
'disabled:cursor-not-allowed disabled:opacity-50 transition-colors', 'disabled:cursor-not-allowed disabled:opacity-50 transition-colors',
{ {
'pl-12': !!prefix, 'pl-[calc(1em+1.25rem)]': !!prefix,
'pr-12': !!suffix || isPasswordInput, 'pr-[calc(1em+1.25rem)]': !!suffix || isPasswordInput,
'pr-24': !!suffix && isPasswordInput, 'pr-[calc(2em+2rem)]': !!suffix && isPasswordInput,
}, },
className, 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) 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="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] duration-300 delay-75"> <div className="h-full flex items-center justify-between gap-4 relative z-[1] text-text-disabled transition-[text-color]">
<LucideSun <LucideSun
className={cn('size-[1em]', !isDark && 'text-text-primary')} className={cn('size-[1em]', !isDark && 'text-text-primary')}
/> />
@ -39,7 +39,7 @@ const ThemeSwitch = forwardRef<
<Thumb <Thumb
className={cn( className={cn(
'absolute top-0 left-0 w-[calc(50%+.25rem)] p-0.5 h-full rounded-full overflow-hidden', '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)]', '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)]': '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 <div className="size-full rounded-full bg-bg-base shadow-md transition-colors ease-out" />
className="
size-full rounded-full bg-bg-base shadow-md
transition-colors ease-out duration-300 delay-75
"
/>
</Thumb> </Thumb>
</Root> </Root>
); );