diff --git a/npm/qsharp/ux/qsharp-ux.css b/npm/qsharp/ux/qsharp-ux.css
index f0cf1809e2..96ced87fd8 100644
--- a/npm/qsharp/ux/qsharp-ux.css
+++ b/npm/qsharp/ux/qsharp-ux.css
@@ -50,39 +50,23 @@ modern-normalize (see https://mattbrictson.com/blog/css-normalize-and-reset for
   --bar-selected-outline: #587ddd;
 }
 
-/* Generic element resets */
-
-/* TODO: Don't apply to entire page */
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  box-sizing: border-box;
-  font-size: 16px;
-}
-
 /* TODO: Make the below playground specific classes */
 
 /* Playground body */
 
 .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 +83,12 @@ html {
   padding-bottom: 8px;
 }
 
+.content {
+  grid-area: content;
+  height: 100%;
+  overflow: auto;
+}
+
 #popup {
   position: absolute;
   display: none;
@@ -113,6 +103,7 @@ html {
 
 .nav-column {
   grid-area: nav;
+  overflow: auto;
   background-color: var(--nav-background);
 }
 
@@ -143,12 +134,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,6 +274,18 @@ 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);
 }
 
@@ -242,13 +293,6 @@ html {
 
 /* 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;
@@ -256,8 +300,9 @@ html {
 }
 
 .results-labels {
+  grid-area: results-labels;
   display: flex;
-  height: 32px;
+  align-items: center;
 }
 
 .results-labels > div {
@@ -268,16 +313,14 @@ 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;
@@ -292,8 +335,7 @@ html {
 }
 
 .qir-output {
-  height: 40vh;
-  min-height: 400px;
+  height: 100%;
   width: 100%;
   resize: none;
   white-space: pre;
@@ -306,11 +348,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;
 }
diff --git a/playground/src/docs.tsx b/playground/src/docs.tsx
index ccbd078921..16cc9d3209 100644
--- a/playground/src/docs.tsx
+++ b/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>
+  );
 }
diff --git a/playground/src/editor.tsx b/playground/src/editor.tsx
index d3dcad9c06..f987ca3966 100644
--- a/playground/src/editor.tsx
+++ b/playground/src/editor.tsx
@@ -250,6 +250,7 @@ export function Editor(props: {
     const newEditor = monaco.editor.create(editorDiv.current, {
       minimap: { enabled: false },
       lineNumbersMinChars: 3,
+      automaticLayout: true,
     });
 
     editor.current = newEditor;
@@ -413,8 +414,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
@@ -520,6 +521,6 @@ export function Editor(props: {
           </div>
         ))}
       </div>
-    </div>
+    </>
   );
 }
diff --git a/playground/src/main.css b/playground/src/main.css
index 14c667eb8c..001c44ada2 100644
--- a/playground/src/main.css
+++ b/playground/src/main.css
@@ -1,3 +1,20 @@
+/* Copyright (c) Microsoft Corporation.
+   Licensed under the MIT License. */
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  box-sizing: border-box;
+  overflow: hidden;
+  font-size: 16px;
+}
+
 .language-qsharp {
   line-height: 125%;
 }
diff --git a/playground/src/main.tsx b/playground/src/main.tsx
index 09cb330f1b..e83548b374 100644
--- a/playground/src/main.tsx
+++ b/playground/src/main.tsx
@@ -167,54 +167,56 @@ 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}
+              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!}
             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>
-        </>
-      ) : 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>
     </>
   );
diff --git a/playground/src/results.tsx b/playground/src/results.tsx
index acba0e78fd..51f9dbb143 100644
--- a/playground/src/results.tsx
+++ b/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>
             </>
diff --git a/playground/src/tabs.tsx b/playground/src/tabs.tsx
index f6f1c519fe..a38ffee014 100644
--- a/playground/src/tabs.tsx
+++ b/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,11 +78,13 @@ export function OutputTabs(props: {
           ))}
         </div>
       ) : null}
-      <ResultsTab {...props} />
-      <AstTab {...props} />
-      <HirTab {...props} />
-      <RirTab {...props} />
-      <QirTab {...props} />
-    </div>
+      <div class="output">
+        <ResultsTab {...props} />
+        <AstTab {...props} />
+        <HirTab {...props} />
+        <RirTab {...props} />
+        <QirTab {...props} />
+      </div>
+    </>
   );
 }
diff --git a/vscode/src/webview/webview.css b/vscode/src/webview/webview.css
new file mode 100644
index 0000000000..be4b5d7330
--- /dev/null
+++ b/vscode/src/webview/webview.css
@@ -0,0 +1,17 @@
+/* Copyright (c) Microsoft Corporation.
+   Licensed under the MIT License. */
+
+/* Generic element resets */
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: 16px;
+}
diff --git a/vscode/src/webview/webview.tsx b/vscode/src/webview/webview.tsx
index 4d91eba04e..350bab6faa 100644
--- a/vscode/src/webview/webview.tsx
+++ b/vscode/src/webview/webview.tsx
@@ -16,6 +16,7 @@ import {
 } from "qsharp-lang/ux";
 import { HelpPage } from "./help";
 import { DocumentationView, IDocFile } from "./docview";
+import "./webview.css";
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore - there are no types for this
diff --git a/widgets/js/index.tsx b/widgets/js/index.tsx
index 1bb15ef7c1..6507f0db8a 100644
--- a/widgets/js/index.tsx
+++ b/widgets/js/index.tsx
@@ -14,6 +14,7 @@ import {
   setRenderer,
 } from "qsharp-lang/ux";
 import markdownIt from "markdown-it";
+import "./widgets.css";
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore - there are no types for this
diff --git a/widgets/js/widgets.css b/widgets/js/widgets.css
new file mode 100644
index 0000000000..be4b5d7330
--- /dev/null
+++ b/widgets/js/widgets.css
@@ -0,0 +1,17 @@
+/* Copyright (c) Microsoft Corporation.
+   Licensed under the MIT License. */
+
+/* Generic element resets */
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: 16px;
+}