控件宽度小，用纵向排版

dashboard/src/components/template/SentEdit/SentContent.tsx

@@ -3,7 +3,7 @@ import SentCell from "./SentCell";
 import { WbwSentCtl } from "../WbwSent";
 import { useAppSelector } from "../../../hooks";
 import { settingInfo } from "../../../reducers/setting";
-import { useEffect, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { GetUserSetting } from "../../auth/setting/default";
 import { mode } from "../../../reducers/article-mode";
 import { IWbw } from "../Wbw/WbwWord";
@@ -44,12 +44,22 @@ const SentContentWidget = ({
     left: 5,
     right: 5,
   });
+  const divShell = useRef<HTMLDivElement>(null);
   const settings = useAppSelector(settingInfo);
+  const [divShellWidth, setDivShellWidth] = useState<number>();
+
   useEffect(() => {
+    const width = divShell.current?.offsetWidth;
+    console.log("settings", width);
+    if (width && width < 550) {
+      setLayoutDirection("column");
+      return;
+    }
     const layoutDirection = GetUserSetting(
       "setting.layout.direction",
       settings
     );
+
     if (typeof layoutDirection === "string") {
       setLayoutDirection(layoutDirection as TDirection);
     }
@@ -72,8 +82,20 @@ const SentContentWidget = ({
         break;
     }
   }, [newMode]);
+
+  useLayoutEffect(() => {
+    const width = divShell.current?.offsetWidth;
+    setDivShellWidth(width);
+    console.log("width", width);
+    if (width && width < 550) {
+      setLayoutDirection("column");
+      return;
+    }
+  }, []);
+
   return (
     <div
+      ref={divShell}
       style={{
         display: "flex",
         flexDirection: layoutDirection,