zlei6/ragflow
1
0
Fork 0
mirror of https://github.com/infiniflow/ragflow.git synced 2026-06-29 15:31:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): fix layout issues with text, overflow, and spacing consistency (#16324)

Browse Source
This commit is contained in:
Yoorim Choi
2026-06-25 20:25:32 +09:00
committed by GitHub
parent e8bb534b90
commit 46b97bd1a1
6 changed files with 29 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/components/confirm-delete-dialog.tsx
View File

@@ -65,7 +65,7 @@ export function ConfirmDeleteDialog({
<AlertDialogContent
onSelect={(e) => e.preventDefault()}
onClick={(e) => e.stopPropagation()}
className="bg-bg-base "
className="bg-bg-base"
data-testid={testId ?? 'confirm-delete-dialog'}
>
<AlertDialogHeader className="space-y-5">
@@ -82,7 +82,7 @@ export function ConfirmDeleteDialog({
<>
<Separator className="w-[calc(100%+48px)] -translate-x-6"></Separator>
<AlertDialogDescription className="mt-5">
<div className="flex flex-col gap-5 text-base mb-10 px-5">
<div className="flex flex-col gap-2 text-base mb-10 px-5">
<div className="text-text-primary">
{content.title || t('common.deleteModalTitle')}
</div>
@@ -92,7 +92,7 @@ export function ConfirmDeleteDialog({
</>
)}
</AlertDialogHeader>
<AlertDialogFooter className="px-5 flex items-center gap-2">
<AlertDialogFooter className="px-5 flex items-center">
<AlertDialogCancel
onClick={onCancel}
data-testid={

8
web/src/components/list-filter-bar/filter-field.tsx
View File

@@ -70,9 +70,9 @@ const FilterItem = memo(
<div
className={`flex items-center justify-between text-text-primary text-xs ${level > 0 ? 'ml-1' : ''}`}
>
<FormItem className="flex flex-row space-x-3 space-y-0 items-center ">
<FormItem className="flex flex-row space-x-3 space-y-0 items-center min-w-0 flex-1">
<FormControl>
<div className="flex space-x-3">
<div className="flex items-center space-x-2 min-w-0">
<Checkbox
checked={field.value?.includes?.(item.id.toString())}
onCheckedChange={(checked: boolean) =>
@@ -88,7 +88,7 @@ const FilterItem = memo(
item,
})
}
className="truncate w-[200px] text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-text-secondary"
className="truncate text-sm font-normal leading-normal peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-text-secondary"
>
{item.label}
</div>
@@ -96,7 +96,7 @@ const FilterItem = memo(
</FormControl>
</FormItem>
{item.count !== undefined && (
<span className="text-sm">{item.count}</span>
<span className="text-sm shrink-0 ml-2 text-right">{item.count}</span>
)}
</div>
);

9
web/src/components/list-filter-bar/filter-popover.tsx
View File

@@ -209,7 +209,7 @@ function CheckboxFormMultiple({
return (
<div
key={key}
className="flex flex-col space-y-4 border-b border-border-button pb-4"
className="flex flex-col gap-4 border-b border-border-button pb-4"
>
<div className="text-text-primary text-sm">{key}</div>
<div className="flex flex-col space-y-4">
@@ -223,7 +223,6 @@ function CheckboxFormMultiple({
onChange={(e) =>
handleSearchChange(x.field, e.target.value)
}
className="h-8"
/>
</div>
)}
@@ -249,7 +248,7 @@ function CheckboxFormMultiple({
return (
<FormItem className="space-y-4" key={x.field}>
<div>
<div className="flex flex-col items-start justify-between mb-2">
<div className="flex flex-col items-start justify-between gap-2 mb-2">
<FormLabel className="text-text-primary text-sm">
{x.label}
</FormLabel>
@@ -260,7 +259,7 @@ function CheckboxFormMultiple({
onChange={(e) =>
handleSearchChange(x.field, e.target.value)
}
className="h-8 w-full"
rootClassName="w-full"
/>
)}
</div>
@@ -287,7 +286,7 @@ function CheckboxFormMultiple({
})}
</div>
<div className="flex justify-end gap-5">
<div className="flex justify-end gap-2">
<Button
type="button"
variant={'outline'}

2
web/src/components/ui/tooltip.tsx
View File

@@ -38,7 +38,7 @@ export const FormTooltip = ({ tooltip }: { tooltip: React.ReactNode }) => {
<TooltipTrigger asChild>
<span
tabIndex={-1}
className="inline-flex align-text-top"
className="inline-flex align-middle -translate-y-[.02em]"
onClick={(e) => {
e.preventDefault(); // Prevent clicking the tooltip from triggering form save
}}

28
web/src/pages/dataset/dataset-setting/configuration/common-item.tsx
View File

@@ -67,8 +67,10 @@ export function ChunkMethodItem(props: IProps) {
control={form.control}
name={name}
render={({ field }) => (
<FormItem className=" items-center space-y-1">
<div className={line === 1 ? 'flex items-center' : ''}>
<FormItem className="items-center gap-1">
<div
className={line === 1 ? 'flex items-center' : 'flex flex-col gap-1'}
>
<FormLabel
required
tooltip={t('chunkMethodTip')}
@@ -78,7 +80,7 @@ export function ChunkMethodItem(props: IProps) {
>
{t('builtIn')}
</FormLabel>
<div className={line === 1 ? 'w-3/4 ' : 'w-full'}>
<div className={line === 1 ? 'w-3/4' : 'w-full'}>
<FormControl>
<SelectWithSearch
{...field}
@@ -123,7 +125,7 @@ export const EmbeddingSelect = ({
return (
<Spin
spinning={loading}
className={cn(' rounded-lg after:bg-bg-base', {
className={cn('rounded-lg after:bg-bg-base', {
'opacity-20': loading,
})}
>
@@ -161,17 +163,17 @@ export function EmbeddingModelItem({ line = 1, isEdit }: IProps) {
control={form.control}
name={'embedding_model'}
render={({ field }) => (
<FormItem className={cn(' items-center space-y-0 ')}>
<FormItem className={cn('items-center space-y-0')}>
<div
className={cn('flex', {
' items-center': line === 1,
'items-center': line === 1,
'flex-col gap-1': line === 2,
})}
>
<FormLabel
required
tooltip={t('embeddingModelTip')}
className={cn('text-sm whitespace-wrap ', {
className={cn('text-sm whitespace-wrap', {
'w-1/4': line === 1,
})}
>
@@ -216,10 +218,10 @@ export function ParseTypeItem({
control={form.control}
name={name}
render={({ field }) => (
<FormItem className=" items-center space-y-0 ">
<FormItem className="items-center space-y-0">
<div
className={cn('flex', {
' items-center': line === 1,
'items-center': line === 1,
'flex-col gap-1': line === 2,
})}
>
@@ -268,7 +270,7 @@ export function EnableAutoGenerateItem() {
control={form.control}
name={'enableAutoGenerate'}
render={({ field }) => (
<FormItem className=" items-center space-y-0 ">
<FormItem className="items-center space-y-0">
<div className="flex items-center">
<FormLabel
tooltip={t('enableAutoGenerateTip')}
@@ -304,7 +306,7 @@ export function EnableTocToggle() {
control={form.control}
name={'parser_config.toc_extraction'}
render={({ field }) => (
<FormItem className=" items-center space-y-0 ">
<FormItem className="items-center space-y-0">
<div className="flex items-center">
<FormLabel
tooltip={t('tocExtractionTip')}
@@ -561,10 +563,10 @@ export function LLMModelItem({ line = 1, isEdit, label, name }: IProps) {
control={form.control}
name={name ?? 'llm_id'}
render={({ field }) => (
<FormItem className={cn(' items-center space-y-0 ')}>
<FormItem className={cn('items-center space-y-0')}>
<div
className={cn('flex', {
' items-center': line === 1,
'items-center': line === 1,
'flex-col gap-1': line === 2,
})}
>

7
web/src/pages/datasets/dataset-creating-dialog.tsx
View File

@@ -124,11 +124,8 @@ export function InputForm({ onOk }: IModalProps<any>) {
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>
<span className="text-destructive mr-1"> *</span>
{t('knowledgeList.name')}
</FormLabel>
<FormItem className="space-y-1">
<FormLabel required>{t('knowledgeList.name')}</FormLabel>
<FormControl>
<Input
placeholder={t('knowledgeList.namePlaceholder')}