Revert "Improve playground layout (#2098)" (#2117)

This reverts commit 1255ac0.

Thee `html` element css update broke some things in VS Code. Reverting
until I can figure it out and redo the change.

Author: minestarks

npm/qsharp/ux/qsharp-ux.css

@@ -63,7 +63,6 @@ modern-normalize (see https://mattbrictson.com/blog/css-normalize-and-reset for
 
 html {
   box-sizing: border-box;
-  overflow: hidden;
   font-size: 16px;
 }
 
@@ -73,17 +72,17 @@ html {
 
 .qs-play-body {
   position: relative;
-  height: 100vh;
+  min-height: 100vh;
   font-family: system-ui, "Segoe UI", "SegoeUI", Roboto, Helvetica, Arial,
     sans-serif;
   color: var(--main-color);
   background-color: var(--main-background);
   display: grid;
   grid-template-areas:
-    "header header"
-    "nav content";
+    "header header header"
+    "nav editor results";
   grid-template-rows: auto 1fr;
-  grid-template-columns: minmax(180px, auto) 1fr;
+  grid-template-columns: minmax(180px, auto) 8fr 8fr;
   column-gap: 16px;
 }
 
@@ -100,12 +99,6 @@ html {
   padding-bottom: 8px;
 }
 
-.content {
-  grid-area: content;
-  height: 100%;
-  overflow: auto;
-}
-
 #popup {
   position: absolute;
   display: none;
@@ -120,7 +113,6 @@ html {
 
 .nav-column {
   grid-area: nav;
-  overflow: auto;
   background-color: var(--nav-background);
 }
 
@@ -151,60 +143,12 @@ html {
   background-color: var(--nav-current-background);
 }
 
-/* Samples layout */
-
-.samples {
-  position: relative;
-  height: 100%;
-  display: grid;
-  grid-template-areas:
-    "editor-header results-labels"
-    "editor-code output"
-    "editor-commands ."
-    "editor-diags .";
-  grid-template-rows: 35px 1fr 35px 150px;
-  grid-template-columns: 3fr 4fr;
-  column-gap: 16px;
-  padding-right: 16px;
-  padding-top: 16px;
-}
-
-.samples .code-editor {
-  /* This position attribute allows the monaco editor
-  to shrink when the window is resized to be smaller.
-  https://stackoverflow.com/a/71876526 */
-  position: absolute !important;
-  grid-area: editor-code;
-  height: 100%;
-  width: 100%;
-}
-
-.samples .button-row {
-  grid-area: editor-commands;
-}
-
-.samples .editor-header {
-  grid-area: editor-header;
-}
-
-.samples .diag-list {
-  overflow: auto;
-  grid-area: editor-diags;
-}
-
-.samples .output {
-  grid-area: output;
-  height: 100%;
-  min-height: 400px;
-  resize: none;
-}
-
 /* Editor section */
 
-.editor-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: end;
+.editor-column {
+  grid-area: editor;
+  margin: 16px;
+  margin-top: 32px;
 }
 
 .file-name {
@@ -291,35 +235,29 @@ html {
 /* Katas */
 
 .kata-override {
-  /* The padding is just to shrink the width
-  to make the content more readable */
-  padding-right: 40%;
-  background-color: var(--main-background);
-}
-
-/* Documentation */
-
-.doc-container {
-  /* The padding is just to shrink the width
-  to make the content more readable */
-  padding-right: 40%;
   background-color: var(--main-background);
 }
 
 /* TODO: Update all components with specific prefixes */
 
 /* Results panels */
 
+.results-column {
+  grid-area: results;
+  margin-left: 0px;
+  margin-top: 32px;
+  margin-right: 120px;
+}
+
 .active-tab {
   font-size: 1.1rem;
   font-weight: 600;
   text-decoration: underline;
 }
 
 .results-labels {
-  grid-area: results-labels;
   display: flex;
-  align-items: center;
+  height: 32px;
 }
 
 .results-labels > div {
@@ -330,14 +268,16 @@ html {
 }
 
 .ast-output {
-  height: 100%;
+  height: 40vh;
+  min-height: 400px;
   width: 100%;
   resize: none;
   white-space: pre;
 }
 
 .hir-output {
-  height: 100%;
+  height: 40vh;
+  min-height: 400px;
   width: 100%;
   resize: none;
   white-space: pre;
@@ -352,7 +292,8 @@ html {
 }
 
 .qir-output {
-  height: 100%;
+  height: 40vh;
+  min-height: 400px;
   width: 100%;
   resize: none;
   white-space: pre;
@@ -365,10 +306,11 @@ html {
   font-weight: 400;
   margin-top: 16px;
   margin-bottom: 16px;
+  display: flex;
+  justify-content: space-between;
 }
 
 .prev-next {
-  margin-bottom: 16px;
   font-weight: 200;
   cursor: pointer;
 }

playground/src/docs.tsx

@@ -53,9 +53,5 @@ export function DocumentationDisplay(props: {
 }) {
   const docsMd = props.documentation?.get(props.currentNamespace) ?? "";
 
-  return (
-    <div class="markdown-body doc-container">
-      <Markdown markdown={docsMd} className="doc-container" />
-    </div>
-  );
+  return <Markdown markdown={docsMd} />;
 }

playground/src/editor.tsx

@@ -250,7 +250,6 @@ export function Editor(props: {
     const newEditor = monaco.editor.create(editorDiv.current, {
       minimap: { enabled: false },
       lineNumbersMinChars: 3,
-      automaticLayout: true,
     });
 
     editor.current = newEditor;
@@ -414,8 +413,8 @@ export function Editor(props: {
   }
 
   return (
-    <>
-      <div class="editor-header">
+    <div class="editor-column">
+      <div style="display: flex; justify-content: space-between; align-items: center;">
         <div class="file-name">main.qs</div>
         <div class="icon-row">
           <svg
@@ -521,6 +520,6 @@ export function Editor(props: {
           </div>
         ))}
       </div>
-    </>
+    </div>
   );
 }

playground/src/main.tsx

@@ -167,56 +167,54 @@ function App(props: { katas: Kata[]; linkedCode?: string }) {
         samples={sampleTitles}
         namespaces={getNamespaces(documentation)}
       ></Nav>
-      <div class="content">
-        {sampleCode ? (
-          <div class="samples">
-            <Editor
-              code={sampleCode}
-              compiler={compiler}
-              compiler_worker_factory={compiler_worker_factory}
-              compilerState={compilerState}
-              onRestartCompiler={onRestartCompiler}
-              evtTarget={evtTarget}
-              defaultShots={defaultShots}
-              showShots={true}
-              showExpr={true}
-              shotError={shotError}
-              profile={getProfile()}
-              setAst={setAst}
-              setHir={setHir}
-              setRir={setRir}
-              setQir={setQir}
-              activeTab={activeTab}
-              languageService={languageService}
-            ></Editor>
-            <OutputTabs
-              evtTarget={evtTarget}
-              showPanel={true}
-              onShotError={(diag?: VSDiagnostic) => setShotError(diag)}
-              ast={ast}
-              hir={hir}
-              rir={rir}
-              qir={qir}
-              activeTab={activeTab}
-              setActiveTab={setActiveTab}
-            ></OutputTabs>
-          </div>
-        ) : activeKata ? (
-          <Katas
-            kata={activeKata!}
+      {sampleCode ? (
+        <>
+          <Editor
+            code={sampleCode}
             compiler={compiler}
             compiler_worker_factory={compiler_worker_factory}
             compilerState={compilerState}
             onRestartCompiler={onRestartCompiler}
+            evtTarget={evtTarget}
+            defaultShots={defaultShots}
+            showShots={true}
+            showExpr={true}
+            shotError={shotError}
+            profile={getProfile()}
+            setAst={setAst}
+            setHir={setHir}
+            setRir={setRir}
+            setQir={setQir}
+            activeTab={activeTab}
             languageService={languageService}
-          ></Katas>
-        ) : (
-          <DocumentationDisplay
-            currentNamespace={currentNavItem}
-            documentation={documentation}
-          ></DocumentationDisplay>
-        )}
-      </div>
+          ></Editor>
+          <OutputTabs
+            evtTarget={evtTarget}
+            showPanel={true}
+            onShotError={(diag?: VSDiagnostic) => setShotError(diag)}
+            ast={ast}
+            hir={hir}
+            rir={rir}
+            qir={qir}
+            activeTab={activeTab}
+            setActiveTab={setActiveTab}
+          ></OutputTabs>
+        </>
+      ) : activeKata ? (
+        <Katas
+          kata={activeKata!}
+          compiler={compiler}
+          compiler_worker_factory={compiler_worker_factory}
+          compilerState={compilerState}
+          onRestartCompiler={onRestartCompiler}
+          languageService={languageService}
+        ></Katas>
+      ) : (
+        <DocumentationDisplay
+          currentNamespace={currentNavItem}
+          documentation={documentation}
+        ></DocumentationDisplay>
+      )}
       <div id="popup"></div>
     </>
   );

playground/src/results.tsx

@@ -225,13 +225,13 @@ export function ResultsTab(props: {
           {props.kataMode ? null : (
             <>
               <div class="output-header">
+                <div>
+                  Shot {currIndex + 1} of {countForFilter}
+                </div>
                 <div class="prev-next">
                   <span onClick={onPrev}>Prev</span> |{" "}
                   <span onClick={onNext}>Next</span>
                 </div>
-                <div>
-                  Shot {currIndex + 1} of {countForFilter}
-                </div>
               </div>
               <div class="result-label">Result: {resultLabel}</div>
             </>

playground/src/tabs.tsx

@@ -65,7 +65,7 @@ export function OutputTabs(props: {
   setActiveTab: (tab: ActiveTab) => void;
 }) {
   return (
-    <>
+    <div class="results-column">
       {props.showPanel ? (
         <div class="results-labels">
           {tabArray.map((elem) => (
@@ -78,13 +78,11 @@ export function OutputTabs(props: {
           ))}
         </div>
       ) : null}
-      <div class="output">
-        <ResultsTab {...props} />
-        <AstTab {...props} />
-        <HirTab {...props} />
-        <RirTab {...props} />
-        <QirTab {...props} />
-      </div>
-    </>
+      <ResultsTab {...props} />
+      <AstTab {...props} />
+      <HirTab {...props} />
+      <RirTab {...props} />
+      <QirTab {...props} />
+    </div>
   );
 }