Merge branch 'chore/improve-mobile-playground' into feat/playground-v2

typescript-eslint · Sep 19, 2023 · 99af316 · 99af316
2 parents 16e4a20 + 98c6493
commit 99af316
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 115 deletions.
diff --git a/packages/website/src/components/Playground.module.css b/packages/website/src/components/Playground.module.css
@@ -6,12 +6,12 @@
 .playgroundMenu {
   width: 100%;
   background: var(--playground-main-color);
+  overflow: auto;
 }
 
-.playgroundEditor {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
+.tabCode {
+  flex: 1;
+  overflow: hidden;
 }
 
 .hidden {
@@ -26,13 +26,6 @@
   background: var(--code-editor-bg);
 }
 
-.playgroundInfoHeader {
-  position: sticky;
-  top: 0;
-  left: 0;
-  z-index: 1;
-}
-
 .playgroundInfo {
   word-wrap: normal;
   width: 100%;
@@ -42,16 +35,7 @@
 
 .panelGroup {
   height: calc(100vh - 60px) !important;
-}
-
-.panelGroup .panelGroup {
-  height: calc(100vh - 111px) !important;
-}
-
-@media (max-width: 996px) {
-  .panelGroup .panelGroup {
-    height: auto !important;
-  }
+  border-top: 1px solid var(--ifm-color-emphasis-200);
 }
 
 .Panel {
@@ -103,6 +87,11 @@
 
 @media (max-width: 500px) {
   .PanelResizeHandle {
-    flex: 0 0 10px;
+    flex: 0 0 21px;
+    border-width: 0 10px;
+  }
+
+  .PanelResizeHandle[data-panel-group-direction='vertical'] {
+    border-width: 10px 0;
   }
 }
diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
@@ -21,6 +21,7 @@ import { TypesDetails } from './typeDetails/TypesDetails';
 import type { ErrorGroup } from './types';
 
 function Playground(): React.JSX.Element {
+  const windowSize = useWindowSize();
   const [state, setState] = useHashState(defaultConfig);
 
   const [system] = useState<PlaygroundSystem>(() => createFileSystem(state));
@@ -35,8 +36,6 @@ function Playground(): React.JSX.Element {
   const [cursorPosition, onCursorChange] = useState<number>();
   const playgroundMenuRef = useRef<ImperativePanelHandle>(null);
 
-  const windowSize = useWindowSize();
-
   const activeVisualEditor =
     visualEslintRc && activeFile === '.eslintrc'
       ? 'eslintrc'

diff --git a/packages/website/src/components/typeDetails/TypesDetails.tsx b/packages/website/src/components/typeDetails/TypesDetails.tsx
@@ -34,12 +34,13 @@ export function TypesDetails({
   }, [cursorPosition, value]);
 
   return (
-    <PanelGroup
-      className={styles.panelGroup}
-      autoSaveId="playground-types"
-      direction="horizontal"
-    >
-      <Panel id="simplifiedTree" defaultSize={35} collapsible={true}>
+    <PanelGroup autoSaveId="playground-types" direction="horizontal">
+      <Panel
+        id="simplifiedTree"
+        defaultSize={35}
+        collapsible={true}
+        className={styles.PanelColumn}
+      >
         <div className={styles.playgroundInfoContainer}>
           <SimplifiedTreeView
             onHoverNode={onHoverNode}
@@ -51,7 +52,7 @@ export function TypesDetails({
       </Panel>
       <PanelResizeHandle className={styles.PanelResizeHandle} />
       {selectedNode && (
-        <Panel id="typeInfo" collapsible={true}>
+        <Panel id="typeInfo" collapsible={true} className={styles.PanelColumn}>
           <div className={styles.playgroundInfoContainer}>
             <TypeInfo
               onHoverNode={onHoverNode}

diff --git a/patches/typescript+5.2.1-rc.patch b/patches/typescript+5.2.1-rc.patch