fix: profiles when drag sort container scroll style

src/components/base/base-page.tsx

@@ -6,12 +6,13 @@ interface Props {
   title?: React.ReactNode; // the page title
   header?: React.ReactNode; // something behind title
   contentStyle?: React.CSSProperties;
+  sectionStyle?: React.CSSProperties;
   children?: ReactNode;
   full?: boolean;
 }
 
 export const BasePage: React.FC<Props> = (props) => {
-  const { title, header, contentStyle, full, children } = props;
+  const { title, header, contentStyle, full, children, sectionStyle } = props;
 
   return (
     <BaseErrorBoundary>
@@ -25,7 +26,7 @@ export const BasePage: React.FC<Props> = (props) => {
         </header>
 
         <div className={full ? "base-container no-padding" : "base-container"}>
-          <section>
+          <section style={sectionStyle}>
             <div className="base-content" style={contentStyle} data-windrag>
               {children}
             </div>

src/pages/profiles.tsx

@@ -42,7 +42,7 @@ import {
 import { LoadingButton } from "@mui/lab";
 import { Box, Button, Grid, IconButton, Stack, TextField } from "@mui/material";
 import { useLockFn } from "ahooks";
-import { throttle } from "lodash-es";
+import { over, throttle } from "lodash-es";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useSetRecoilState } from "recoil";
@@ -275,9 +275,14 @@ export default function ProfilePage() {
     if (text) setUrl(text);
   };
 
+  const [sectionOverflowStatus, setSectionOverflowStatus] = useState(false);
+
   return (
     <BasePage
       title={t("Profiles")}
+      sectionStyle={{
+        overflow: sectionOverflowStatus ? "hidden" : "auto",
+      }}
       header={
         <Box sx={{ mt: 1, display: "flex", alignItems: "center", gap: 1 }}>
           <IconButton
@@ -375,6 +380,8 @@ export default function ProfilePage() {
         sensors={sensors}
         collisionDetection={closestCenter}
         onDragEnd={onDragEnd}
+        onDragStart={() => setSectionOverflowStatus(true)}
+        onDragOver={() => setSectionOverflowStatus(false)}
       >
         <Box sx={{ mb: 4.5 }}>
           <Grid container spacing={{ xs: 3, lg: 3 }}>