UI fixes: example list, code scroll, header containment

- Examples: replaced mushroom + diamond with wireframe-spheres; reordered
to lead with badge/trophy/coins templates then hero visuals (8 total)
- Code tab: added max-height:480px + overflow:auto on #tg-code and .cm-scroller
so the Three.js output scrolls internally instead of growing the page
- Header: moved border-bottom/margin-bottom to inline styles on the inner <div>
so they survive Gradio's block wrapper; cleaned up #tg-header CSS to just
zero out any Gradio chrome (background/border/shadow)

app.py

@@ -41,16 +41,14 @@ def _generate_json(prompt: str) -> str:
 
 
 EXAMPLES = [
-    "a faceted crystal — one large icosahedron, electric blue, metallic",
-    "a glowing wireframe torus knot on a black background",
-    "a chunky cartoon mushroom: red dome sphere on a white cylinder stem",
-    "a molten-gold torus knot, high metalness, low roughness",
-    "three glowing neon-green cubes stacked into a tower",
-    "a chrome icosahedron orbited by small glowing purple spheres",
-    "a row of three gold coins side by side",
-    "a tall trophy: a star on top of a golden column",
     "a star badge with the text PRO",
     "a shield badge with the text NEW",
+    "a row of three gold coins side by side",
+    "a tall trophy: a star on top of a golden column",
+    "a molten-gold torus knot, high metalness, low roughness",
+    "a faceted crystal — one large icosahedron, electric blue, metallic",
+    "three glowing neon-green cubes stacked into a tower",
+    "a red wireframe sphere inside a larger blue wireframe sphere",
 ]
 
 _NESTED_SPHERE_PATTERNS = ("wireframe sphere inside", "sphere inside", "nested sphere")
@@ -336,15 +334,15 @@ footer { display: none !important; }
   padding: 0 28px !important;
 }
 
-/* ── Header ── */
-#tg-header {
+/* ── Header wrapper (Gradio block containing the header HTML) ── */
+#tg-header,
+#tg-header > * {
   background: transparent !important;
-  border-bottom: 1px solid var(--tg-border) !important;
-  margin-bottom: 28px !important;
+  border: none !important;
   padding: 0 !important;
+  margin: 0 !important;
+  box-shadow: none !important;
 }
-#tg-header > * { background: transparent !important; border: none !important; }
-#tg-header .prose, #tg-header .block { background: transparent !important; }
 
 /* ── Card groups ── */
 .tg-card {
@@ -533,6 +531,21 @@ input[type="range"]::-moz-range-thumb {
 }
 #tg-json > * { background: transparent !important; }
 
+/* ── Code tab: fixed height, internal scroll ── */
+#tg-code,
+#tg-code .code-wrap,
+#tg-code .cm-editor,
+#tg-code .codemirror-wrapper {
+  max-height: 480px !important;
+  overflow: auto !important;
+}
+/* Fallback: any code editor inside the preview column tabs */
+#tg-preview-col .code-wrap,
+#tg-preview-col .cm-scroller {
+  max-height: 480px !important;
+  overflow: auto !important;
+}
+
 /* ── Code block ── */
 .codemirror-wrapper, .cm-editor {
   background: #08081a !important;
@@ -558,13 +571,14 @@ input[type="range"]::-moz-range-thumb {
 # ---- HTML fragments -------------------------------------------------------
 
 _HEADER_HTML = """
-<div id="tg-header" style="display:flex;align-items:center;gap:18px;padding:28px 0 24px;">
+<div style="display:flex;align-items:center;gap:18px;
+            padding:28px 0 24px;
+            border-bottom:1px solid rgba(255,255,255,0.07);
+            margin-bottom:28px;">
   <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect width="42" height="42" rx="11" fill="url(#hg)"/>
-    <!-- hexagon representing a cube face -->
     <polygon points="21,7 34,14.5 34,27.5 21,35 8,27.5 8,14.5"
              fill="none" stroke="rgba(255,255,255,0.85)" stroke-width="1.8"/>
-    <!-- inner depth lines -->
     <line x1="21" y1="7"    x2="21" y2="21" stroke="rgba(255,255,255,0.45)" stroke-width="1.4"/>
     <line x1="34" y1="14.5" x2="21" y2="21" stroke="rgba(255,255,255,0.45)" stroke-width="1.4"/>
     <line x1="8"  y1="14.5" x2="21" y2="21" stroke="rgba(255,255,255,0.45)" stroke-width="1.4"/>
@@ -660,6 +674,7 @@ with gr.Blocks(title="ThreeGen", theme=_build_theme(), css=_CSS) as demo:
                         language="html",
                         label="",
                         show_label=False,
+                        elem_id="tg-code",
                     )
 
     # Scene JSON (collapsed)