From 08559cacd72a22812e774b1e33b3b869338303e1 Mon Sep 17 00:00:00 2001
From: Anthony Ettinger <anthony@chovy.com>
Date: Thu, 24 Sep 2026 05:45:57 -0700
Subject: [PATCH] OpenIcon: the gallery must hold four colour styles, not one
 (#210)

The detail panel's hero was a flex row that could not wrap, and the style
tabs were a segmented group that could not shrink. Both were written when
a set had one colour style; with hq plus the three agentic styles the
later tiles fell outside the panel entirely ("Agentic Machined" and
"Agentic Emissive" rendered past the right edge) and the tab group's
min-content width dragged the whole page onto a horizontal scrollbar on
a phone.

- hero: style previews move into their own auto-fit grid that reflows,
  72px -> 64px so four fit a 24rem panel, labels wrap and centre. The
  margin-left:auto that positioned the single old tile is gone.
- toolbar: the grid column is minmax(0, 1fr) rather than auto, so no one
  unbreakable control can widen the page, and the style group scrolls
  inside its own border.

Both are sized by what the set ships, so a fifth style costs nothing.

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../src/app/openicon/gallery.module.css       | 53 ++++++++++++++++---
 .../logicsrc-web/src/app/openicon/gallery.tsx | 29 ++++++----
 2 files changed, 65 insertions(+), 17 deletions(-)

diff --git a/apps/logicsrc-web/src/app/openicon/gallery.module.css b/apps/logicsrc-web/src/app/openicon/gallery.module.css
index 57ec511..f439eff 100644
--- a/apps/logicsrc-web/src/app/openicon/gallery.module.css
+++ b/apps/logicsrc-web/src/app/openicon/gallery.module.css
@@ -22,6 +22,9 @@
   top: 0;
   z-index: 3;
   display: grid;
+  /* minmax(0, 1fr), not auto: an auto column takes the min-content width of
+     the widest row, so one unbreakable control would widen the whole page. */
+  grid-template-columns: minmax(0, 1fr);
   gap: 0.6rem;
   padding: 0.75rem 0 0.8rem;
   background: #f6f7f4;
@@ -54,18 +57,29 @@
   gap: 0.6rem 0.9rem;
 }
 
+/*
+ * The style group grows a tab per colour style the set ships, so it can be
+ * wider than a phone; it scrolls inside its own border instead of stretching
+ * the toolbar and putting the whole page on a horizontal scrollbar.
+ */
 .segmented {
   display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
   border: 1px solid #cfd5cc;
   border-radius: 0.55rem;
-  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
   background: #fff;
 }
 
 .seg,
 .segOn {
+  flex: none;
   padding: 0.4rem 0.75rem;
   font-size: 0.86rem;
+  white-space: nowrap;
   background: #fff;
   color: #101418;
   border-right: 1px solid #e3e6e0;
@@ -272,14 +286,33 @@
 }
 
 .hero {
-  display: flex;
-  align-items: center;
-  gap: 1.4rem;
+  display: grid;
+  gap: 1rem;
   padding: 1.2rem;
   border-radius: 0.9rem;
   background: radial-gradient(circle at 30% 20%, #ffffff, #eef1ec);
 }
 
+.heroMain {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem 1.4rem;
+}
+
+/*
+ * One tile per colour style, and the set may add more of them; a row that
+ * cannot wrap pushes the later styles out of the panel, so this is a grid
+ * that reflows rather than a flex line.
+ */
+.heroStyles {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr));
+  gap: 0.7rem 0.5rem;
+  padding-top: 0.9rem;
+  border-top: 1px solid rgb(16 20 24 / 7%);
+}
+
 .heroSmall {
   display: flex;
   align-items: flex-end;
@@ -400,8 +433,16 @@
 .heroHq {
   display: grid;
   justify-items: center;
-  gap: 0.2rem;
-  margin-left: auto;
+  gap: 0.25rem;
+  min-width: 0;
   font-size: 0.7rem;
+  line-height: 1.25;
+  text-align: center;
   color: var(--muted);
+  overflow-wrap: anywhere;
+}
+
+.heroHq img {
+  max-width: 100%;
+  height: auto;
 }
diff --git a/apps/logicsrc-web/src/app/openicon/gallery.tsx b/apps/logicsrc-web/src/app/openicon/gallery.tsx
index cd3243b..dcb3fd8 100644
--- a/apps/logicsrc-web/src/app/openicon/gallery.tsx
+++ b/apps/logicsrc-web/src/app/openicon/gallery.tsx
@@ -443,6 +443,7 @@ function Detail({ icon, set, color, onClose }: { icon: Icon; set: IconSet; color
   }, [icon.svg]);
 
   const t = icon.tui ?? {};
+  const colourIds = Object.keys(stylesOf(icon));
   const img = `<img src="${OPENICON_RAW}/${icon.svg}" alt="${icon.name}" width="24" height="24">`;
   return (
     <aside className={styles.detail} aria-label={`${icon.name} details`}>
@@ -450,18 +451,24 @@ function Detail({ icon, set, color, onClose }: { icon: Icon; set: IconSet; color
         ×
       </button>
       <div className={styles.hero}>
-        <span role="img" aria-label={icon.name} style={maskStyle(icon, color, 96)} />
-        <div className={styles.heroSmall}>
-          {[16, 24, 32].map((size) => (
-            <span key={size} style={maskStyle(icon, color, size)} />
-          ))}
-        </div>
-        {Object.keys(stylesOf(icon)).map((id) => (
-          <div className={styles.heroHq} key={id}>
-            <Art icon={icon} style={id} color={color} size={72} />
-            <span>{set.style_info?.[id]?.label ?? id}</span>
+        <div className={styles.heroMain}>
+          <span role="img" aria-label={icon.name} style={maskStyle(icon, color, 96)} />
+          <div className={styles.heroSmall}>
+            {[16, 24, 32].map((size) => (
+              <span key={size} style={maskStyle(icon, color, size)} />
+            ))}
           </div>
-        ))}
+        </div>
+        {colourIds.length ? (
+          <div className={styles.heroStyles}>
+            {colourIds.map((id) => (
+              <div className={styles.heroHq} key={id}>
+                <Art icon={icon} style={id} color={color} size={64} />
+                <span>{set.style_info?.[id]?.label ?? id}</span>
+              </div>
+            ))}
+          </div>
+        ) : null}
       </div>
       <h3>{icon.name}</h3>
       <dl className={styles.facts}>