Fix styling for overflowing elements

src/components/EditorHeader/Modal/Modal.jsx

@@ -333,6 +333,7 @@ export default function Modal({
       }}
       cancelText={t("cancel")}
       width={modal === MODAL.NEW ? 740 : 600}
+      bodyStyle={{ maxHeight: window.innerHeight - 280, overflow: "auto" }}
     >
       {getModalBody()}
     </SemiUIModal>

src/components/EditorHeader/Modal/New.jsx

@@ -10,7 +10,7 @@ export default function New({ selectedTemplateId, setSelectedTemplateId }) {
   const templates = useLiveQuery(() => db.templates.toArray());
 
   return (
-    <div className="h-[360px] grid grid-cols-3 gap-2 overflow-auto px-1">
+    <div className="grid grid-cols-3 gap-2 overflow-auto px-1">
       <div onClick={() => setSelectedTemplateId(0)}>
         <div
           className={`rounded-md h-[180px] border-2 hover:border-dashed ${

src/components/EditorSidePanel/AreasTab/AreasTab.jsx

@@ -1,4 +1,4 @@
-import { Row, Col, Button } from "@douyinfe/semi-ui";
+import { Button } from "@douyinfe/semi-ui";
 import { IconPlus } from "@douyinfe/semi-icons";
 import Empty from "../Empty";
 import { useAreas } from "../../../hooks";
@@ -12,16 +12,14 @@ export default function AreasTab() {
 
   return (
     <div>
-      <Row gutter={6}>
-        <Col span={16}>
-          <SearchBar />
-        </Col>
-        <Col span={8}>
+      <div className="flex gap-2">
+        <SearchBar />
+        <div>
           <Button icon={<IconPlus />} block onClick={addArea}>
             {t("add_area")}
           </Button>
-        </Col>
-      </Row>
+        </div>
+      </div>
       {areas.length <= 0 ? (
         <Empty
           title={t("no_subject_areas")}

src/components/EditorSidePanel/NotesTab/NotesTab.jsx

@@ -1,4 +1,4 @@
-import { Row, Col, Button, Collapse } from "@douyinfe/semi-ui";
+import { Button, Collapse } from "@douyinfe/semi-ui";
 import { IconPlus } from "@douyinfe/semi-icons";
 import { useNotes, useSelect } from "../../../hooks";
 import Empty from "../Empty";
@@ -13,23 +13,21 @@ export default function NotesTab() {
 
   return (
     <>
-      <Row gutter={6}>
-        <Col span={16}>
-          <SearchBar
-            setActiveKey={(activeKey) =>
-              setSelectedElement((prev) => ({
-                ...prev,
-                id: parseInt(activeKey),
-              }))
-            }
-          />
-        </Col>
-        <Col span={8}>
+      <div className="flex gap-2">
+        <SearchBar
+          setActiveKey={(activeKey) =>
+            setSelectedElement((prev) => ({
+              ...prev,
+              id: parseInt(activeKey),
+            }))
+          }
+        />
+        <div>
           <Button icon={<IconPlus />} block onClick={() => addNote()}>
             {t("add_note")}
           </Button>
-        </Col>
-      </Row>
+        </div>
+      </div>
       {notes.length <= 0 ? (
         <Empty title={t("no_notes")} text={t("no_notes_text")} />
       ) : (

src/components/EditorSidePanel/TablesTab/TableInfo.jsx

@@ -1,8 +1,6 @@
 import { useState } from "react";
 import {
   Collapse,
-  Row,
-  Col,
   Input,
   TextArea,
   Button,
@@ -210,8 +208,8 @@ export default function TableInfo({ data }) {
           </Collapse.Panel>
         </Collapse>
       </Card>
-      <Row gutter={6} className="mt-2">
-        <Col span={8}>
+      <div className="flex justify-between items-center gap-1 mb-2">
+        <div>
           <Popover
             content={
               <div className="popover-theme">
@@ -263,12 +261,12 @@ export default function TableInfo({ data }) {
             showArrow
           >
             <div
-              className="h-[32px] w-[32px] rounded mb-2"
+              className="h-[32px] w-[32px] rounded"
               style={{ backgroundColor: data.color }}
             />
           </Popover>
-        </Col>
-        <Col span={7}>
+        </div>
+        <div className="flex gap-1">
           <Button
             block
             onClick={() => {
@@ -302,8 +300,6 @@ export default function TableInfo({ data }) {
           >
             {t("add_index")}
           </Button>
-        </Col>
-        <Col span={6}>
           <Button
             onClick={() => {
               setUndoStack((prev) => [
@@ -342,15 +338,13 @@ export default function TableInfo({ data }) {
           >
             {t("add_field")}
           </Button>
-        </Col>
-        <Col span={3}>
           <Button
             icon={<IconDeleteStroked />}
             type="danger"
             onClick={() => deleteTable(data.id)}
           />
-        </Col>
-      </Row>
+        </div>
+      </div>
     </div>
   );
 }

src/components/EditorSidePanel/TablesTab/TablesTab.jsx

@@ -1,4 +1,4 @@
-import { Collapse, Row, Col, Button } from "@douyinfe/semi-ui";
+import { Collapse, Button } from "@douyinfe/semi-ui";
 import { IconPlus } from "@douyinfe/semi-icons";
 import { useSelect, useTables } from "../../../hooks";
 import { ObjectType } from "../../../data/constants";
@@ -14,16 +14,14 @@ export default function TablesTab() {
 
   return (
     <>
-      <Row gutter={6}>
-        <Col span={16}>
-          <SearchBar tables={tables} />
-        </Col>
-        <Col span={8}>
+      <div className="flex gap-2">
+        <SearchBar tables={tables} />
+        <div>
           <Button icon={<IconPlus />} block onClick={() => addTable()}>
             {t("add_table")}
           </Button>
-        </Col>
-      </Row>
+        </div>
+      </div>
       {tables.length === 0 ? (
         <Empty title={t("no_tables")} text={t("no_tables_text")} />
       ) : (

src/components/EditorSidePanel/TypesTab/TypesTab.jsx

@@ -1,4 +1,4 @@
-import { Collapse, Row, Col, Button, Popover } from "@douyinfe/semi-ui";
+import { Collapse, Button, Popover } from "@douyinfe/semi-ui";
 import { IconPlus, IconInfoCircle } from "@douyinfe/semi-icons";
 import { useSelect, useTypes } from "../../../hooks";
 import { ObjectType } from "../../../data/constants";
@@ -14,33 +14,29 @@ export default function TypesTab() {
 
   return (
     <>
-      <Row gutter={6}>
-        <Col span={13}>
-          <Searchbar />
-        </Col>
-        <Col span={8}>
+      <div className="flex gap-2">
+        <Searchbar />
+        <div>
           <Button icon={<IconPlus />} block onClick={() => addType()}>
             {t("add_type")}
           </Button>
-        </Col>
-        <Col span={3}>
-          <Popover
-            content={
-              <div className="w-[240px] text-sm space-y-2 popover-theme">
-                {t("types_info")
-                  .split("\n")
-                  .map((line, index) => (
-                    <div key={index}>{line}</div>
-                  ))}
-              </div>
-            }
-            showArrow
-            position="rightTop"
-          >
-            <Button theme="borderless" icon={<IconInfoCircle />} />
-          </Popover>
-        </Col>
-      </Row>
+        </div>
+        <Popover
+          content={
+            <div className="w-[240px] text-sm space-y-2 popover-theme">
+              {t("types_info")
+                .split("\n")
+                .map((line, index) => (
+                  <div key={index}>{line}</div>
+                ))}
+            </div>
+          }
+          showArrow
+          position="rightTop"
+        >
+          <Button theme="borderless" icon={<IconInfoCircle />} />
+        </Popover>
+      </div>
       {types.length <= 0 ? (
         <Empty title={t("no_types")} text={t("no_types_text")} />
       ) : (