Improve playground layout (#2098)

Some adjustments to the CSS so that the playground elements shrink and
grow in a more intuitive way.

- So far I've tested on Edge (Windows) and Safari (Mac). I haven't
tested on Firefox.
- I wasn't sure how to refactor the CSS to leave it better than I found
it. I'm happy to make more changes, please give me feedback about how I
can improve the code organization.


![2025-01-09_11-46-50](https://github.com/user-attachments/assets/33993415-7e33-4f4c-8776-fe4040da6fae)

Author: minestarks

npm/qsharp/ux/qsharp-ux.css

@@ -63,6 +63,7 @@ modern-normalize (see https://mattbrictson.com/blog/css-normalize-and-reset for
 
 html {
   box-sizing: border-box;
+  overflow: hidden;
   font-size: 16px;
 }
 
@@ -72,17 +73,17 @@ html {
 
 .qs-play-body {
   position: relative;
-  min-height: 100vh;
+  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 header"
-    "nav editor results";
+    "header header"
+    "nav content";
   grid-template-rows: auto 1fr;
-  grid-template-columns: minmax(180px, auto) 8fr 8fr;
+  grid-template-columns: minmax(180px, auto) 1fr;
   column-gap: 16px;
 }
 
@@ -99,6 +100,12 @@ html {
   padding-bottom: 8px;
 }
 
+.content {
+  grid-area: content;
+  height: 100%;
+  overflow: auto;
+}
+
 #popup {
   position: absolute;
   display: none;
@@ -113,6 +120,7 @@ html {
 
 .nav-column {
   grid-area: nav;
+  overflow: auto;
   background-color: var(--nav-background);
 }
 
@@ -143,12 +151,60 @@ 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-column {
-  grid-area: editor;
-  margin: 16px;
-  margin-top: 32px;
+.editor-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
 }
 
 .file-name {
@@ -235,29 +291,35 @@ 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;
-  height: 32px;
+  align-items: center;
 }
 
 .results-labels > div {
@@ -268,24 +330,21 @@ html {
 }
 
 .ast-output {
-  height: 40vh;
-  min-height: 400px;
+  height: 100%;
   width: 100%;
   resize: none;
   white-space: pre;
 }
 
 .hir-output {
-  height: 40vh;
-  min-height: 400px;
+  height: 100%;
   width: 100%;
   resize: none;
   white-space: pre;
 }
 
 .qir-output {
-  height: 40vh;
-  min-height: 400px;
+  height: 100%;
   width: 100%;
   resize: none;
   white-space: pre;
@@ -298,11 +357,10 @@ 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,5 +53,9 @@ export function DocumentationDisplay(props: {
 }) {
   const docsMd = props.documentation?.get(props.currentNamespace) ?? "";
 
-  return <Markdown markdown={docsMd} />;
+  return (
+    <div class="markdown-body doc-container">
+      <Markdown markdown={docsMd} className="doc-container" />
+    </div>
+  );
 }

playground/src/editor.tsx

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

playground/src/main.tsx

@@ -161,52 +161,54 @@ function App(props: { katas: Kata[]; linkedCode?: string }) {
         samples={sampleTitles}
         namespaces={getNamespaces(documentation)}
       ></Nav>
-      {sampleCode ? (
-        <>
-          <Editor
-            code={sampleCode}
+      <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}
+              setQir={setQir}
+              activeTab={activeTab}
+              languageService={languageService}
+            ></Editor>
+            <OutputTabs
+              evtTarget={evtTarget}
+              showPanel={true}
+              onShotError={(diag?: VSDiagnostic) => setShotError(diag)}
+              ast={ast}
+              hir={hir}
+              qir={qir}
+              activeTab={activeTab}
+              setActiveTab={setActiveTab}
+            ></OutputTabs>
+          </div>
+        ) : activeKata ? (
+          <Katas
+            kata={activeKata!}
             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}
-            setQir={setQir}
-            activeTab={activeTab}
             languageService={languageService}
-          ></Editor>
-          <OutputTabs
-            evtTarget={evtTarget}
-            showPanel={true}
-            onShotError={(diag?: VSDiagnostic) => setShotError(diag)}
-            ast={ast}
-            hir={hir}
-            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>
-      )}
+          ></Katas>
+        ) : (
+          <DocumentationDisplay
+            currentNamespace={currentNavItem}
+            documentation={documentation}
+          ></DocumentationDisplay>
+        )}
+      </div>
       <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

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