Fix: The buttons at the bottom of the dataset settings page are not visible on small screens #9638 (#9639)

### What problem does this PR solve?

Fix: The buttons at the bottom of the dataset settings page are not
visible on small screens #9638
### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/ui/input.tsx

@@ -116,7 +116,10 @@ export { ExpandedInput, Input, SearchInput };
 
 type NumberInputProps = { onChange?(value: number): void } & InputProps;
 
-export const NumberInput = ({ onChange, ...props }: NumberInputProps) => {
+export const NumberInput = React.forwardRef<
+  HTMLInputElement,
+  NumberInputProps & { value: Value; onChange(value: Value): void }
+>(function NumberInput({ onChange, ...props }, ref) {
   return (
     <Input
       type="number"
@@ -125,6 +128,7 @@ export const NumberInput = ({ onChange, ...props }: NumberInputProps) => {
         onChange?.(value === '' ? 0 : Number(value)); // convert to number
       }}
       {...props}
+      ref={ref}
     ></Input>
   );
-};
+});

web/src/pages/dataset/index.tsx

@@ -19,7 +19,7 @@ export default function DatasetWrapper() {
   const { data } = useFetchKnowledgeBaseConfiguration();
 
   return (
-    <section>
+    <section className="flex h-full flex-col w-full">
       <PageHeader>
         <Breadcrumb>
           <BreadcrumbList>
@@ -35,7 +35,7 @@ export default function DatasetWrapper() {
           </BreadcrumbList>
         </Breadcrumb>
       </PageHeader>
-      <div className="flex flex-1">
+      <div className="flex flex-1 min-h-0">
         <SideBar></SideBar>
         <div className="flex-1">
           <Outlet />

web/src/pages/dataset/setting/chunk-method-form.tsx

@@ -66,10 +66,10 @@ export function ChunkMethodForm() {
   }, [finalParserId]);
 
   return (
-    <>
+    <section className="h-full flex flex-col">
-      <section className="overflow-auto max-h-[76vh]">
+      <div className="overflow-auto flex-1 min-h-0">
         <ConfigurationComponent></ConfigurationComponent>
-      </section>
+      </div>
       <div className="text-right pt-4 flex justify-end gap-3">
         <Button
           type="reset"
@@ -112,6 +112,6 @@ export function ChunkMethodForm() {
           {t('knowledgeConfiguration.save')}
         </Button>
       </div>
-    </>
+    </section>
   );
 }

web/src/pages/dataset/setting/chunk-method-learn-more.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
 import { X } from 'lucide-react';
 import { useState } from 'react';
 import CategoryPanel from './category-panel';
@@ -14,20 +15,22 @@ export default ({
 
   return (
     <div
-      style={{
+      className={cn('hidden flex-1', {
-        display: tab === 'chunkMethodForm' ? 'block' : 'none',
+        'flex flex-col': tab === 'chunkMethodForm',
-      }}
+      })}
     >
-      <Button
+      <div>
-        variant="outline"
+        <Button
-        onClick={() => {
+          variant="outline"
-          setVisible(!visible);
+          onClick={() => {
-        }}
+            setVisible(!visible);
-      >
+          }}
-        Learn More
+        >
-      </Button>
+          Learn More
+        </Button>
+      </div>
       <div
-        className="bg-[#FFF]/10 p-[20px] rounded-[12px] mt-[10px] relative"
+        className="bg-[#FFF]/10 p-[20px] rounded-[12px] mt-[10px] relative flex-1 overflow-auto"
         style={{ display: visible ? 'block' : 'none' }}
       >
         <CategoryPanel chunkMethod={parserId}></CategoryPanel>

web/src/pages/dataset/setting/index.tsx

@@ -81,22 +81,23 @@ export default function DatasetSettings() {
   }
 
   return (
-    <section className="p-5 ">
+    <section className="p-5 h-full flex flex-col">
       <TopTitle
         title={t('knowledgeDetails.configuration')}
         description={t('knowledgeConfiguration.titleDescription')}
       ></TopTitle>
-      <div className="flex gap-14">
+      <div className="flex gap-14 flex-1 min-h-0">
         <Form {...form}>
           <form
             onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-6 basis-full min-w-[1000px] max-w-[1000px]"
+            className="space-y-6 flex-1"
           >
             <Tabs
               defaultValue="generalForm"
               onValueChange={(val) => {
                 setCurrentTab(val);
               }}
+              className="h-full flex flex-col"
             >
               <TabsList className="grid bg-transparent grid-cols-2 rounded-none text-foreground">
                 <TabsTrigger
@@ -120,10 +121,10 @@ export default function DatasetSettings() {
                   </div>
                 </TabsTrigger>
               </TabsList>
-              <TabsContent value="generalForm">
+              <TabsContent value="generalForm" className="flex-1 min-h-0">
                 <GeneralForm></GeneralForm>
               </TabsContent>
-              <TabsContent value="chunkMethodForm">
+              <TabsContent value="chunkMethodForm" className="flex-1 min-h-0">
                 <ChunkMethodForm></ChunkMethodForm>
               </TabsContent>
             </Tabs>