@web-portfolio/icons-sanity 1.0.0 → 1.0.1

package/dist/index.cjs

@@ -7138,6 +7138,7 @@ var ResultsScroller = (0, import_styled_components.styled)(import_ui.Box)`
      the dialog once the list bottoms out. */
   overscroll-behavior: contain;
 `;
+var LABEL_ROW_HEIGHT = 20;
 var IconTile = (0, import_styled_components.styled)(import_ui.Card)`
   &&[data-as='button'] {
     cursor: pointer;
@@ -7147,11 +7148,29 @@ var IconTile = (0, import_styled_components.styled)(import_ui.Card)`
     /* Without this a long label ("Google Cloud Platform") widens its grid
        column and knocks the whole row out of alignment. */
     min-width: 0;
+    /* Every tile in a row must be the same height for the grid's implicit
+       row track to size correctly — an overflowing label would otherwise
+       stretch its own row and visually collide with the row underneath. */
+    overflow: hidden;
   }
 `;
 var GlyphRow = (0, import_styled_components.styled)(import_ui.Flex)`
   height: ${({ theme }) => (0, import_ui.rem)(theme.sanity.space[5])};
 `;
+var LabelRow = (0, import_styled_components.styled)(import_ui.Box)`
+  height: ${(0, import_ui.rem)(LABEL_ROW_HEIGHT)};
+  overflow: hidden;
+
+  /* Belt-and-braces alongside Text's \`textOverflow="ellipsis"\` prop: force
+     single-line truncation here too so a long label can never wrap and grow
+     the tile past its fixed height. */
+  > * {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
 var CategorySelectBox = (0, import_styled_components.styled)(import_ui.Box)`
   /* Wide enough for the longest category label without letting the select
      crowd out the search field. */
@@ -7379,7 +7398,7 @@ function IconPickerInput(props) {
                       onClick: () => handleSelect(name),
                       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Stack, { space: 2, children: [
                         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlyphRow, { align: "center", justify: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconGlyph, { name, size: GRID_ICON_SIZE }) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Text, { size: 0, align: "center", muted: true, textOverflow: "ellipsis", children: entry.label })
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LabelRow, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Text, { size: 0, align: "center", muted: true, textOverflow: "ellipsis", children: entry.label }) })
                       ] })
                     }
                   )

package/dist/index.js

@@ -7123,6 +7123,7 @@ var ResultsScroller = styled(Box)`
      the dialog once the list bottoms out. */
   overscroll-behavior: contain;
 `;
+var LABEL_ROW_HEIGHT = 20;
 var IconTile = styled(Card)`
   &&[data-as='button'] {
     cursor: pointer;
@@ -7132,11 +7133,29 @@ var IconTile = styled(Card)`
     /* Without this a long label ("Google Cloud Platform") widens its grid
        column and knocks the whole row out of alignment. */
     min-width: 0;
+    /* Every tile in a row must be the same height for the grid's implicit
+       row track to size correctly — an overflowing label would otherwise
+       stretch its own row and visually collide with the row underneath. */
+    overflow: hidden;
   }
 `;
 var GlyphRow = styled(Flex)`
   height: ${({ theme }) => rem(theme.sanity.space[5])};
 `;
+var LabelRow = styled(Box)`
+  height: ${rem(LABEL_ROW_HEIGHT)};
+  overflow: hidden;
+
+  /* Belt-and-braces alongside Text's \`textOverflow="ellipsis"\` prop: force
+     single-line truncation here too so a long label can never wrap and grow
+     the tile past its fixed height. */
+  > * {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
 var CategorySelectBox = styled(Box)`
   /* Wide enough for the longest category label without letting the select
      crowd out the search field. */
@@ -7364,7 +7383,7 @@ function IconPickerInput(props) {
                       onClick: () => handleSelect(name),
                       children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
                         /* @__PURE__ */ jsx(GlyphRow, { align: "center", justify: "center", children: /* @__PURE__ */ jsx(IconGlyph, { name, size: GRID_ICON_SIZE }) }),
-                        /* @__PURE__ */ jsx(Text, { size: 0, align: "center", muted: true, textOverflow: "ellipsis", children: entry.label })
+                        /* @__PURE__ */ jsx(LabelRow, { children: /* @__PURE__ */ jsx(Text, { size: 0, align: "center", muted: true, textOverflow: "ellipsis", children: entry.label }) })
                       ] })
                     }
                   )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web-portfolio/icons-sanity",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Sanity Studio icon picker input, backed by the same bundled registry as @web-portfolio/icons.",
   "license": "MIT",
   "keywords": [
@@ -57,7 +57,7 @@
     "styled-components": "^6.1.13",
     "tsup": "^8.3.5",
     "typescript": "^5.7.0",
-    "vitest": "^2.1.0"
+    "vitest": "^3.2.7"
   },
   "publishConfig": {
     "access": "public"