Feat: Make the scroll bar of the DatasetSettings page appear inside #…

…3221 (#4548)

### What problem does this PR solve?

Feat: Make the scroll bar of the DatasetSettings page appear inside
#3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/global.less

@@ -2,6 +2,7 @@
 
 html {
   height: 100%;
+  overflow: hidden; // The content of the DatasetSettings page is too high, which will cause scroll bars to appear on the html tags. Setting the maximum height in DatasetSettings does not work either. I don't understand.
 }
 
 body {

web/src/pages/dataset/index.tsx

@@ -3,7 +3,7 @@ import { SideBar } from './sidebar';
 
 export default function DatasetWrapper() {
   return (
-    <div className="text-foreground flex flex-1">
+    <div className="flex flex-1">
       <SideBar></SideBar>
       <div className="flex-1">
         <Outlet />

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

@@ -1,20 +1,24 @@
-import { Card } from '@/components/ui/card';
+import { Card, CardContent } from '@/components/ui/card';
 import AdvancedSettingForm from './advanced-setting-form';
 import BasicSettingForm from './basic-setting-form';
 
 export default function DatasetSettings() {
   return (
-    <section className="flex flex-col p-8 overflow-auto h-[80vh]">
-      <div className="text-3xl font-bold mb-6">Basic settings</div>
-      <Card className="border-0 p-6 mb-8 bg-colors-background-inverse-weak">
-        <div className="w-2/5">
-          <BasicSettingForm></BasicSettingForm>
-        </div>
+    <section className="p-8 overflow-y-scroll max-h-[90vh]">
+      <div className="text-3xl font-bold pb-6">Basic settings</div>
+      <Card className="border-0 p-6 bg-colors-background-inverse-weak">
+        <CardContent>
+          <div className="w-2/5">
+            <BasicSettingForm></BasicSettingForm>
+          </div>
+        </CardContent>
       </Card>
 
-      <div className="text-3xl font-bold mb-6">Advanced settings</div>
-      <Card className="border-0 p-6 mb-8 bg-colors-background-inverse-weak">
-        <AdvancedSettingForm></AdvancedSettingForm>
+      <div className="text-3xl font-bold pb-6 pt-8">Advanced settings</div>
+      <Card className="border-0 p-6 bg-colors-background-inverse-weak">
+        <CardContent>
+          <AdvancedSettingForm></AdvancedSettingForm>
+        </CardContent>
       </Card>
     </section>
   );

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

@@ -16,7 +16,7 @@ export default function RetrievalTesting() {
         <h2 className="text-3xl font-bold mb-8 px-[10%]">
           15 Results from 3 files
         </h2>
-        <section className="flex flex-col gap-4 overflow-auto h-[85vh] px-[10%]">
+        <section className="flex flex-col gap-4 overflow-auto h-[83vh] px-[10%]">
           {list.map((x, idx) => (
             <Card
               key={idx}

web/src/pages/profile-setting/model/index.tsx

@@ -12,36 +12,36 @@ const modelLibraryList = new Array(4).fill(1);
 
 export default function ModelManagement() {
   return (
-    <section className="p-8 space-y-8">
+    <section className="p-8 space-y-8 ">
       <div className="flex justify-between items-center ">
         <h1 className="text-4xl font-bold">Team management</h1>
-        <Button className="hover:bg-[#6B4FD8] text-white bg-colors-background-core-standard">
-          Unfinished
-        </Button>
+        <Button>Unfinished</Button>
+      </div>
+      <div className="max-h-[84vh] overflow-auto">
+        <SystemModelSetting></SystemModelSetting>
+        <section className="mt-6">
+          <h2 className="text-2xl font-semibold mb-3">Added model</h2>
+          <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-4 gap-4">
+            {addedModelList.map((x, idx) => (
+              <AddModelCard key={idx}></AddModelCard>
+            ))}
+          </div>
+        </section>
+        <section className="mt-6">
+          <div className="flex justify-between items-center mb-3">
+            <h2 className="text-2xl font-semibold ">Model library</h2>
+            <Input
+              placeholder="search"
+              className="bg-colors-background-inverse-weak w-1/5"
+            ></Input>
+          </div>
+          <div className="grid grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-4">
+            {modelLibraryList.map((x, idx) => (
+              <ModelLibraryCard key={idx}></ModelLibraryCard>
+            ))}
+          </div>
+        </section>
       </div>
-      <SystemModelSetting></SystemModelSetting>
-      <section>
-        <h2 className="text-2xl font-semibold mb-3">Added model</h2>
-        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-4 gap-4">
-          {addedModelList.map((x, idx) => (
-            <AddModelCard key={idx}></AddModelCard>
-          ))}
-        </div>
-      </section>
-      <section>
-        <div className="flex justify-between items-center mb-3">
-          <h2 className="text-2xl font-semibold ">Model library</h2>
-          <Input
-            placeholder="search"
-            className="bg-colors-background-inverse-weak w-1/5"
-          ></Input>
-        </div>
-        <div className="grid grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-4">
-          {modelLibraryList.map((x, idx) => (
-            <ModelLibraryCard key={idx}></ModelLibraryCard>
-          ))}
-        </div>
-      </section>
     </section>
   );
 }