From 9af0b16cd48853b5630d9b7f2f6affe1ece90332 Mon Sep 17 00:00:00 2001
From: Gregg Tavares <github@greggman.com>
Date: Sat, 3 Feb 2024 20:51:26 -0800
Subject: [PATCH] More CSS formatting

---
 index.html | 16 +++++++++++-----
 index.js   | 10 ++++++----
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 167629e..097dd61 100644
--- a/index.html
+++ b/index.html
@@ -113,10 +113,18 @@
 #content {
   margin: 0 auto;
 }
-.adapters,
-.others {
-  display: inline-flex;
+.sections {
+  display: flex;
   flex-wrap: wrap;
+  align-items: start;
+}
+.others {
+  flex: 1 1 auto;
+  display: inline-grid;
+  grid-auto-columns: min-content;
+}
+.other {
+  flex: 1 0 auto;
 }
 .adapter,
 .other {
@@ -189,8 +197,6 @@
   .worker>td:nth-child(2) {
     text-align: right;
   }
-  .adapters,
-  .others,
   .adapter,
   .other,
   table {
diff --git a/index.js b/index.js
index a10f93e..aa1aa33 100644
--- a/index.js
+++ b/index.js
@@ -619,14 +619,16 @@ async function main() {
       ));
   }
   window.a = adapterIds;
-  addElemToDocument(el('div', {className: 'adapters'},
+  const sectionsElem = el('div', {className: 'sections'},
     [...actualAdaptersIds].map(([id, {desc, elem}], ndx) => el('div', {className: 'adapter'}, [
       createHeading('h2', '=', `${adapterIds.size > 1 ? `#${ndx + 1} ` : ''}${(adapterIds.size > 1) ? `${desc}` : ''}`),
       elem,
-    ]))));
+    ])));
+  addElemToDocument(sectionsElem);
 
-  const others = el('div', {className: 'others'})
-  addElemToDocument(others);
+  const others = el('div', {className: 'others'});
+  //const outer = el('div', {className: 'outer'}, [others]);
+  sectionsElem.appendChild(others);
   checkWGSLLanguageFeatures(others);
   checkMisc(others, {haveFallback});
   await checkWorker(others, 'dedicated');