set module css pattern

react-common/components/util.tsx

@@ -46,7 +46,7 @@ export function fireClickOnEnter(e: React.KeyboardEvent<HTMLElement>) {
     }
 }
 
-export function classList(...classes: string[]) {
+export function classList(...classes: (string | undefined)[]) {
     return classes
         .filter(c => typeof c === "string")
         .reduce((prev, c) => prev.concat(c.split(" ")), [] as string[])

teachertool/src/App.tsx

@@ -10,11 +10,8 @@ import { downloadTargetConfigAsync } from "./services/backendRequests";
 import { logDebug } from "./services/loggingService";
 
 import HeaderBar from "./components/HeaderBar";
+import MainPanel from "./components/MainPanel";
 import Notifications from "./components/Notifications";
-import DebugInput from "./components/DebugInput";
-import { MakeCodeFrame } from "./components/MakecodeFrame";
-import EvalResultDisplay from "./components/EvalResultDisplay";
-import ActiveRubricDisplay from "./components/ActiveRubricDisplay";
 import CatalogModal from "./components/CatalogModal";
 
 import { postNotification } from "./transforms/postNotification";
@@ -54,17 +51,12 @@ function App() {
             <div className="ui large main loader msft"></div>
         </div>
     ) : (
-        <div className="app-container">
+        <>
             <HeaderBar />
-            <div className="inner-app-container">
-                <DebugInput />
-                <ActiveRubricDisplay />
-                <EvalResultDisplay />
-                <MakeCodeFrame />
-            </div>
+            <MainPanel />
             <CatalogModal />
             <Notifications />
-        </div>
+        </>
     );
 }
 

teachertool/src/components/HeaderBar.tsx

@@ -5,7 +5,7 @@ import { MenuBar } from "react-common/components/controls/MenuBar";
 
 interface HeaderBarProps {}
 
-export const HeaderBar: React.FC<HeaderBarProps> = () => {
+const HeaderBar: React.FC<HeaderBarProps> = () => {
     const appTheme = pxt.appTarget?.appTheme;
 
     const brandIconClick = () => {};

teachertool/src/components/MainPanel.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import css from "./styling/MainPanel.module.css";
+
+import DebugInput from "./DebugInput";
+import MakeCodeFrame from "./MakecodeFrame";
+import EvalResultDisplay from "./EvalResultDisplay";
+import ActiveRubricDisplay from "./ActiveRubricDisplay";
+import SplitPane from "./SplitPane";
+
+interface IProps {}
+
+const MainPanel: React.FC<IProps> = () => {
+    return (
+        <div className={css["main-panel"]}>
+            <SplitPane split={"vertical"} defaultSize={"80%"} primary={"left"}>
+                {/* Left side */}
+                <>
+                    <DebugInput />
+                    <ActiveRubricDisplay />
+                    <EvalResultDisplay />
+                </>
+                {/* Right side */}
+                <>
+                    <MakeCodeFrame />
+                </>
+            </SplitPane>
+        </div>
+    );
+};
+
+export default MainPanel;

teachertool/src/components/MakecodeFrame.tsx

@@ -5,7 +5,8 @@ import { AppStateContext } from "../state/appStateContext";
 import { getEditorUrl } from "../utils";
 
 interface MakeCodeFrameProps {}
-export const MakeCodeFrame: React.FC<MakeCodeFrameProps> = () => {
+
+const MakeCodeFrame: React.FC<MakeCodeFrameProps> = () => {
     const { state: teacherTool } = useContext(AppStateContext);
 
     function createIFrameUrl(shareId: string): string {
@@ -40,3 +41,5 @@ export const MakeCodeFrame: React.FC<MakeCodeFrameProps> = () => {
     );
     /* eslint-enable @microsoft/sdl/react-iframe-missing-sandbox */
 };
+
+export default MakeCodeFrame;

teachertool/src/components/SplitPane.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import css from "./styling/SplitPane.module.css";
+import { classList } from "react-common/components/util";
+
+interface IProps {
+    className?: string;
+    split: "horizontal" | "vertical";
+    defaultSize: number | string;
+    primary: "left" | "right";
+    children: React.ReactNode;
+}
+
+const VerticalSplit: React.FC<IProps> = ({ className, split, children }) => {
+    const [left, right] = React.Children.toArray(children);
+
+    return (
+        <div className={classList(css[`split-pane-${split}`], className)}>
+            <div className={css[`left-${split}`]}>{left}</div>
+            <div className={css[`splitter-${split}`]}>
+                <div className={css[`splitter-${split}-inner`]} />
+            </div>
+            <div className={css[`right-${split}`]}>{right}</div>
+        </div>
+    );
+};
+
+export default VerticalSplit;

teachertool/src/components/styling/MainPanel.module.css

@@ -0,0 +1,8 @@
+
+
+.main-panel {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    width: 100%;
+}

teachertool/src/components/styling/SplitPane.module.css

@@ -0,0 +1,66 @@
+
+/* Vertical split pane */
+
+.split-pane-vertical {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+}
+
+.left-vertical {
+  flex: 1;
+  overflow: auto;
+}
+
+.right-vertical {
+  flex: 1;
+  overflow: auto;
+}
+
+.splitter-vertical {
+  background-color: #ccc;
+  width: 1px;
+}
+
+.splitter-vertical-inner {
+  position: relative;
+  background-color: transparent;
+  transition: background-color 0.2s ease;
+  left: -3px;
+  width: 6px;
+  height: 100%;
+  cursor: ew-resize;
+}
+
+.splitter-vertical-inner:hover {
+  background-color: #000000aa;
+  transition: background-color 0.2s ease;
+  transition-delay: 0.2s;
+}
+
+/* Horizontal split pane */
+
+.split-pane-horizontal {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.left-horizontal {
+  flex: 1;
+  overflow: auto;
+}
+
+.right-horizontal {
+  flex: 1;
+  overflow: auto;
+}
+
+.splitter-horizontal {
+  flex: 0 0 1px;
+  background-color: #ccc;
+  height: 5px;
+  cursor: ns-resize;
+}

teachertool/src/teacherTool.css

@@ -44,6 +44,10 @@
     --high-contrast-hyperlink: #807FFF;
 }
 
+* {
+    min-height: initial;
+    min-width: initial;
+}
 
 body {
     -webkit-font-smoothing: antialiased;
@@ -55,19 +59,12 @@ code {
     font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
 
-.app-container {
+#root {
     display: flex;
     flex-direction: column;
     height: 100%;
     width: 100%;
-    overflow: auto;
-}
-
-.inner-app-container {
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-    width: 100%;
+    overflow: hidden;
 }
 
 .noclick {
@@ -96,6 +93,7 @@ code {
     flex-grow: 0;
     flex-shrink: 0;
     z-index: var(--above-frame-zindex);
+    margin: 0;
 }
 
 .header-left, .header-right {