fix: live editor in mobile size

Author: wangdicoder

apps/docs/src/containers/theme-editor/theme-editor.scss

@@ -42,6 +42,18 @@
     min-width: 0;
   }
 
+  @media (max-width: 840px) {
+    &__layout {
+      flex-direction: column;
+    }
+
+    &__sidebar {
+      width: 100%;
+      position: static;
+      max-height: none;
+    }
+  }
+
   // Panel
   &__panel {
     padding: 8px 0;

packages/react/src/tabs/tabs.tsx

@@ -161,12 +161,14 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
       if (!el || !wrap || !showNav) return;
 
       if (isHorizontal) {
+        const wrapWidth = wrap.clientWidth;
+        if (wrapWidth <= 0) return;
         const elLeft = el.offsetLeft;
         const elRight = elLeft + el.offsetWidth;
         if (elLeft < scrollOffset) {
           setScrollOffset(elLeft);
-        } else if (elRight > scrollOffset + wrap.clientWidth) {
-          setScrollOffset(elRight - wrap.clientWidth);
+        } else if (elRight > scrollOffset + wrapWidth) {
+          setScrollOffset(elRight - wrapWidth);
         }
       }
     }, [currentKey, showNav, isHorizontal, scrollOffset]);