From ff67a6a41c28a0af1503add9ebbc0fcc20f157e1 Mon Sep 17 00:00:00 2001
From: Yong He <yonghe@outlook.com>
Date: Wed, 23 Oct 2024 21:07:50 -0700
Subject: [PATCH] Fix layout

---
 index.html        | 22 ++++++++++++++++------
 styles/styles.css | 15 +++++++++------
 try-slang.js      |  6 +++++-
 3 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 4cc195c..c544705 100644
--- a/index.html
+++ b/index.html
@@ -183,15 +183,25 @@
         <span class="close">&times;</span>
         <h3>Slang Playground</h3>
         <p>
-          <a href="https://github.com/shader-slang/slang" target="_blank"
-            >https://github.com/shader-slang/slang</a
-          >
+          Welcome to Slang Playground. Here you can write, compile and run Slang shaders locally within your browser.
+          The Slang compiler runs locally in your browser and no data is sent to any server.
         </p>
+        <h4>Compiling Shaders (the "Compile" button)</h3>
         <p>
-          Slang is a shading language that extends HLSL with new capabilities
-          for building modular, extensible, and high-performance real-time
-          shading systems.
+          You can compile shaders to many targets supported by Slang here, including SPIR-V, HLSL, GLSL, Metal, and WGSL.
+          Generating DXIL requires DXC, which doesn't run in the browser so it's not supported here.
         </p>
+        <h4>Run Shaders (the "Run" button)</h3>
+        <p>
+          In addition to compiling shaders, this playground can also run simple shaders via WebGPU.
+          The playground supports running two types of shaders:
+        </p>
+        <ul>
+          <li><b>Image Compute Shader</b>: This is a compute shader that returns a pixel value at a given image coordinate, similar to ShaderToys.
+          An image compute shader must define a imageMain function, see the "Circle" demo for an example.</li>
+          <li><b>Print Shader</b>: This is a shader that prints text to the text output window.
+            A print shader must define a printMain function, see the "Ocean" demo for an example.</li>
+        </ul>
       </div>
     </div>
 
diff --git a/styles/styles.css b/styles/styles.css
index 652bcda..5edc955 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -142,6 +142,7 @@ h2 {
   display: inline-block;
   font-size: 14px;
   background-color: var(--button-face);
+  min-width:max-content
 }
 
 #run-btn:hover {
@@ -176,7 +177,6 @@ button[disabled] {
   width: 100%;
   background-color: var(--panel-background);
   padding: 10px;
-  max-height: 95px;
   flex-wrap: wrap;
 }
 
@@ -245,7 +245,7 @@ button[disabled] {
   flex-direction: column;
   gap: 4px;
   font-size: var(--font-size);
-  min-width:50px;
+  min-width:90px;
 }
 
 .input {
@@ -304,9 +304,9 @@ label {
 }
 
 #entrypoint-dropdown {
-  flex: 1 1 auto;
-  max-width: 300px;
-  width: 200px;
+  flex: 1 1 0;
+  width: auto;
+  min-width:max-content;
 }
 
 .navbar-group {
@@ -316,10 +316,10 @@ label {
 
 .navbar-item {
   background-color: var(--light-grey);
+  flex: 1 1 0; 
   color: var(--white);
   padding: 8px 16px;
   text-align: center;
-  height: 98%;
   box-sizing: border-box;
   display: flex;
   justify-content: center;
@@ -328,6 +328,9 @@ label {
   border-radius: 10px;
   margin-left: 10px;
   max-width: fit-content;
+  height: 50px;
+  margin-top:5px;
+  margin-bottom: 5px;
 }
 
 .modal {
diff --git a/try-slang.js b/try-slang.js
index 820d42c..ef2da5e 100644
--- a/try-slang.js
+++ b/try-slang.js
@@ -333,10 +333,14 @@ function loadEditor(readOnlyMode = false, containerId, preloadCode) {
     require(["vs/editor/editor.main"], function () {
       var editor = monaco.editor.create(document.getElementById(containerId), {
                   value: preloadCode,
-                  language: 'javascript',
+                  language: 'csharp',
+                  quickSuggestions: false,
                   theme: 'vs-dark',
                   readOnly: readOnlyMode,
                   automaticLayout: true,
+                  minimap: {
+                    enabled: false
+                },
               });
 
         if (containerId == "codeEditor")