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}>