From 6e39d03a5223916457e0f95123b2baebe37c917d Mon Sep 17 00:00:00 2001
From: Per Bothner <per@bothner.com>
Date: Fri, 18 Aug 2023 16:30:36 -0700
Subject: [PATCH] Some html/css cleanps in demo

* id="grid" should be id="class" (since "grid" is not unique in the document).
* Remove space after 'id=' (multiple places).
* Group 3 texture-atlas elements in new <div class="texture-atlas-container">.
---
 demo/index.html | 22 ++++++++++++----------
 demo/style.css  |  2 +-
 2 files changed, 13 insertions(+), 11 deletions(-)
diff --git a/demo/index.html b/demo/index.html
index 0e22d2d2..a3e28200 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -14,16 +14,16 @@
   <body>
     <h1 style="color: #2D2E2C">xterm.js: A terminal for the <em style="color: #5DA5D5">web</em></h1>
     <div id="container">
-      <div id="grid">
+      <div class="grid">
         <div id="terminal-container"></div>
       </div>
-      <div id="grid">
+      <div class="grid">
         <div class="tab">
-          <button id= "optionsbutton" class="tabLinks" onclick="openSection(event, 'options')">Options</button>
-          <button id= "addonsbutton" class="tabLinks" onclick="openSection(event, 'addons')">Addons</button>
-          <button id= "stylebutton" class="tabLinks" onclick="openSection(event, 'style')">Style</button>
-          <button id= "testbutton" class="tabLinks" onclick="openSection(event, 'test')">Test</button>
-          <button id= "vtbutton" class="tabLinks" onclick="openSection(event, 'vt')">VT</button>
+          <button id="optionsbutton" class="tabLinks" onclick="openSection(event, 'options')">Options</button>
+          <button id="addonsbutton" class="tabLinks" onclick="openSection(event, 'addons')">Addons</button>
+          <button id="stylebutton" class="tabLinks" onclick="openSection(event, 'style')">Style</button>
+          <button id="testbutton" class="tabLinks" onclick="openSection(event, 'test')">Test</button>
+          <button id="vtbutton" class="tabLinks" onclick="openSection(event, 'vt')">VT</button>
         </div>
         <div id="options" class="tabContent">
           <h3>Options</h3>
@@ -118,9 +118,11 @@
         </div>
       </div>
     </div>
-    <input type="checkbox" id="texture-atlas-zoom"/>
-    <label for="texture-atlas-zoom">Zoom texture atlas</label>
-    <div id="texture-atlas"></div>
+    <div id="texture-atlas-container">
+      <input type="checkbox" id="texture-atlas-zoom"/>
+      <label for="texture-atlas-zoom">Zoom texture atlas</label>
+      <div id="texture-atlas"></div>
+    </div>
       <script src="dist/client-bundle.js" defer ></script>
       <script>
       var tab = localStorage.getItem("tab");
diff --git a/demo/style.css b/demo/style.css
index ec4ae0b1..336c0db0 100644
--- a/demo/style.css
+++ b/demo/style.css
@@ -46,7 +46,7 @@ pre {
 #container {
     display: flex;
 }
-#grid {
+.grid {
     flex: 1;
     /* max-height: 80vh;
     overflow-y: auto; */
