small interactive demo polush

Author: lennessyy

docs/evaluate/development-production-features/serverless-workers/demo.mdx

@@ -45,5 +45,5 @@ import { ServerlessWorkerDemo } from '@site/src/components';
 
 ## Next steps
 
-- [Serverless Workers - Go SDK](/develop/go/workers/serverless-workers/aws-lambda) for SDK-specific configuration, defaults, and lifecycle details.
+- [Serverless Workers](/serverless-workers) for concepts, autoscaling, and lifecycle details.
 - [Deploy a Serverless Worker](/production-deployment/worker-deployments/serverless-workers) for the full end-to-end deployment guide.

src/components/elements/ServerlessWorkerDemo.js

@@ -253,9 +253,6 @@ export default function ServerlessWorkerDemo() {
       }));
     };
 
-    // Jump to the last step and start simulation
-    setActiveStep(STEPS.length - 1);
-
     setSim({
       running: true,
       nodeStates: [...IDLE_NODES],
@@ -355,9 +352,10 @@ export default function ServerlessWorkerDemo() {
     <div className={styles.demo}>
       {/* ── Simulation: the main interactive area ── */}
       <div className={styles.columns}>
-        <div className={styles.leftCol}>
-          <section className={styles.section}>
-            <h3 className={styles.sectionTitle}>Serverless Worker Flow</h3>
+          <h3 className={`${styles.sectionTitle} ${styles.row1Left}`}>Serverless Worker Flow</h3>
+          <div className={styles.row1Right} />
+
+          <div className={styles.row2Left}>
             <div className={styles.flowDiagram}>
               {FLOW_NODES.map((node, i) => (
                 <React.Fragment key={i}>
@@ -383,10 +381,29 @@ export default function ServerlessWorkerDemo() {
                 </React.Fragment>
               ))}
             </div>
-          </section>
+          </div>
 
-          <section className={styles.section}>
-            <h3 className={styles.sectionTitle}>Execution Log</h3>
+          <div className={styles.row2Right}>
+            <button
+              className={`${styles.executeBtn} ${sim.running ? styles.executeBtnDisabled : ''}`}
+              onClick={handleSimulate}
+              disabled={sim.running}
+            >
+              {sim.running ? (
+                <>
+                  <span className={styles.spinner} />
+                  Running...
+                </>
+              ) : (
+                'Simulate Workflow'
+              )}
+            </button>
+          </div>
+
+          <h3 className={`${styles.sectionTitle} ${styles.row3Left}`}>Execution Log</h3>
+          <h3 className={`${styles.sectionTitle} ${styles.row3Right}`}>Configuration</h3>
+
+          <div className={styles.row4Left}>
             <div className={styles.log} ref={logScrollRef}>
               {sim.log.length === 0 ? (
                 <div className={styles.logPlaceholder}>
@@ -403,34 +420,13 @@ export default function ServerlessWorkerDemo() {
                   </div>
                 ))
               )}
-            </div>
-
-            {sim.status === 'completed' && (
-              <div className={styles.resultSuccess}>Workflow completed successfully.</div>
-            )}
-          </section>
-        </div>
-
-        <div className={styles.rightCol}>
-          <section className={styles.section}>
-            <button
-              className={`${styles.executeBtn} ${sim.running ? styles.executeBtnDisabled : ''}`}
-              onClick={handleSimulate}
-              disabled={sim.running}
-            >
-              {sim.running ? (
-                <>
-                  <span className={styles.spinner} />
-                  Running...
-                </>
-              ) : (
-                'Simulate Workflow'
+              {sim.status === 'completed' && (
+                <div className={styles.resultSuccess}>Workflow completed successfully.</div>
               )}
-            </button>
-          </section>
+            </div>
+          </div>
 
-          <section className={styles.section}>
-            <h3 className={styles.sectionTitle}>Configuration</h3>
+          <div className={styles.row4Right}>
             <div className={styles.configGrid}>
               <ConfigField
                 label="Deployment Name"
@@ -458,8 +454,7 @@ export default function ServerlessWorkerDemo() {
                 onChange={handleFunctionNameChange}
               />
             </div>
-          </section>
-        </div>
+          </div>
       </div>
 
       <Admonition type="note" title="Simulated logs">

src/components/elements/serverless-worker-demo.module.css

@@ -40,20 +40,73 @@
 /* ── Two-column layout (simulation + config) ──────────────────────────── */
 
 .columns {
-  display: flex;
-  gap: 24px;
-  align-items: flex-start;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto auto 1fr auto;
+  gap: 8px 24px;
 }
 
-.leftCol,
-.rightCol {
-  flex: 1;
-  min-width: 0;
+.row1Left {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: end;
+}
+
+.row1Right {
+  grid-column: 2;
+  grid-row: 1;
+  align-self: end;
+}
+
+.row2Left {
+  grid-column: 1;
+  grid-row: 2;
+  align-self: center;
+}
+
+.row2Right {
+  grid-column: 2;
+  grid-row: 2;
+  align-self: center;
+}
+
+.row3Left {
+  grid-column: 1;
+  grid-row: 3;
+  align-self: end;
+  padding-top: 16px;
+}
+
+.row3Right {
+  grid-column: 2;
+  grid-row: 3;
+  align-self: end;
+  padding-top: 16px;
+}
+
+.row4Left {
+  grid-column: 1;
+  grid-row: 4;
+  margin-bottom: 20px;
+}
+
+.row4Right {
+  grid-column: 2;
+  grid-row: 4;
+  margin-bottom: 20px;
 }
 
 @media (max-width: 900px) {
   .columns {
-    flex-direction: column;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+  }
+  .row1Left, .row1Right,
+  .row2Left, .row2Right,
+  .row3Left, .row3Right,
+  .row4Left, .row4Right {
+    grid-column: 1;
+    grid-row: auto;
   }
 }
 
@@ -282,18 +335,24 @@
   border: 1px solid var(--ifm-color-emphasis-200);
   border-radius: 6px;
   padding: 12px;
-  max-height: 260px;
+  min-height: 100%;
+  max-height: 300px;
   overflow-y: auto;
   font-family: var(--ifm-font-family-monospace);
   font-size: 0.78rem;
   line-height: 1.6;
+  display: flex;
+  flex-direction: column;
 }
 
 .logPlaceholder {
   color: var(--ifm-font-color-secondary);
   font-style: italic;
   text-align: center;
-  padding: 24px 0;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .logLine {