Fix layout

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>
 

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 {

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")