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]">
+    <section className="p-8 overflow-y-scroll max-h-[90vh]">
-      <div className="text-3xl font-bold mb-6">Basic settings</div>
+      <div className="text-3xl font-bold pb-6">Basic settings</div>
-      <Card className="border-0 p-6 mb-8 bg-colors-background-inverse-weak">
+      <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>
+      <div className="text-3xl font-bold pb-6 pt-8">Advanced settings</div>
-      <Card className="border-0 p-6 mb-8 bg-colors-background-inverse-weak">
+      <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

@@ -15,12 +15,11 @@ export default function ModelManagement() {
     <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">
+        <Button>Unfinished</Button>
-          Unfinished
-        </Button>
       </div>
+      <div className="max-h-[84vh] overflow-auto">
         <SystemModelSetting></SystemModelSetting>
-      <section>
+        <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) => (
@@ -28,7 +27,7 @@ export default function ModelManagement() {
             ))}
           </div>
         </section>
-      <section>
+        <section className="mt-6">
           <div className="flex justify-between items-center mb-3">
             <h2 className="text-2xl font-semibold ">Model library</h2>
             <Input
@@ -42,6 +41,7 @@ export default function ModelManagement() {
             ))}
           </div>
         </section>
+      </div>
     </section>
   );
 }