fix: hide the mode switcher in small screen

libs/components/layout/src/header/LayoutHeader.tsx

@@ -11,7 +11,7 @@ import {
     useLocalTrigger,
     useShowSettingsSidebar,
 } from '@toeverything/datasource/state';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { EditorBoardSwitcher } from './EditorBoardSwitcher';
 import { fsApiSupported } from './FileSystem';
 import { Logo } from './Logo';
@@ -23,6 +23,22 @@ export const LayoutHeader = () => {
         useShowSettingsSidebar();
     const { t } = useTranslation();
 
+    // because of header not compatible with small screen, hide the mode switcher in that case, this will be optimize in future.
+    const [hideSwitcher, setHideSwither] = useState(false);
+    const [rootEle, setRootEle] = useState<HTMLDivElement>();
+    useEffect(() => {
+        if (rootEle) {
+            const observer = new ResizeObserver(entries => {
+                setHideSwither(entries[0].contentRect.width < 970);
+            });
+            observer.observe(rootEle);
+
+            return () => {
+                observer.disconnect();
+            };
+        }
+    }, [rootEle]);
+
     const warningTips = useMemo(() => {
         if (!fsApiSupported()) {
             return t('WarningTips.IsNotfsApiSupported');
@@ -42,7 +58,7 @@ export const LayoutHeader = () => {
     }, [currentEditors]);
 
     return (
-        <StyledContainerForHeaderRoot>
+        <StyledContainerForHeaderRoot ref={setRootEle}>
             <StyledHeaderRoot>
                 <FlexContainer>
                     <Logo />
@@ -85,9 +101,11 @@ export const LayoutHeader = () => {
                         </IconButton>
                     </StyledHelper>
                 </FlexContainer>
-                <StyledContainerForEditorBoardSwitcher>
+                {hideSwitcher ? null : (
-                    <EditorBoardSwitcher />
+                    <StyledContainerForEditorBoardSwitcher>
-                </StyledContainerForEditorBoardSwitcher>
+                        <EditorBoardSwitcher />
+                    </StyledContainerForEditorBoardSwitcher>
+                )}
             </StyledHeaderRoot>
         </StyledContainerForHeaderRoot>
     );