fix(webkit): align a toast's leading icon to its title, not to the whole row by gabriel-lisboa-azion · Pull Request #892 · aziontech/webkit

gabriel-lisboa-azion · 2026-08-14T15:19:50Z

Summary

The leading severity icon aligned to the outer row, which a 28px trailing action/close control stretched — so on a one-line toast the glyph sat below the title. Icon + content column now sit in an inner items-start group; the loadingSpinner keeps self-center.
The trailing region takes -my-(--spacing-xxs) so that 28px control no longer inflates a one-line card, and -mr-(--spacing-xs) so a text action's label ends optically flush with the card padding instead of inset by the button's own.
.specs/toast.md updated to describe the two-group anatomy (checksum + last_updated refreshed).

How to test

cd packages/webkit && npx vitest run src/components/feedback/toast → 23 passed.
pnpm storybook:dev → Components/Feedback/Toast. On a one-line toast with an action, the icon, title and action all sit on one centred line and the card height is unchanged by the action. On a multi-line toast, the icon aligns to the title's first line, not the middle of the block. The text action's label ends flush with the card's right padding.

Notes

Visual-only; no prop, event, or slot change.

…ole row The icon and the content column now sit in an inner items-start group, so the typed glyph aligns to the title's line — its only line on a one-line toast, the first line on a multi-line one — instead of to the outer row, which the 28px action/close control stretched. The trailing region takes a negative block margin so that control no longer inflates a one-line card, and a negative inline-end margin so a text action's label ends optically flush with the card's padding instead of inset by the button's own.

Brings in the 17 commits main has since 2026-08-17 — the webkit documentation category (#919), the shared leading column for Select / MultiSelect / Dropdown (#935), resizable-panel (#902), the copy-button tooltip and card-box header inset (#936), --container-site (#923), the page-enter / content-enter arrivals (#896), the colored-icon currentColor fix (#930) and the skills that landed with them. Conflict resolution, all fifteen: Demo wins where it already carries work that is still an OPEN PR on main and main's side is the older shape that PR rewrote — toast-item (#900's `h-[1lh]` line box over #892's `self-center`), use-placement and popover.test (#932's translate anchoring over #891's prose), and the theme animation tokens, where the entry-count canary confirms every main entry survived alongside demo's. Main wins where its side is a superset or the corrected form — DESIGN.md (gains `text-body-prose-md` and `.layout-column-docs`), package.json (keeping demo's footer block would have duplicated the four keys main already merged in above it), and resizable-panel.test, whose named imports are the form that keeps CodeQL from reading a compiler-generated `.vue` default export as undefined. Both sides where each added something: .size-limit.json keeps demo's ratcheted 1.1 KB footer-root budget and takes main's fourteen doc-* entries; the ui-craft skill and the CLI plan keep demo's microcopy routing without duplicating main's entry. Generated artifacts were rebuilt rather than hand-resolved — theme dist via build:tokens, catalog.json via catalog:build — and both carry each side's tokens and all 258 exports.

gabriel-lisboa-azion · 2026-08-14T15:19:50Z

Summary

The leading severity icon aligned to the outer row, which a 28px trailing action/close control stretched — so on a one-line toast the glyph sat below the title. Icon + content column now sit in an inner items-start group; the loadingSpinner keeps self-center.
The trailing region takes -my-(--spacing-xxs) so that 28px control no longer inflates a one-line card, and -mr-(--spacing-xs) so a text action's label ends optically flush with the card padding instead of inset by the button's own.
.specs/toast.md updated to describe the two-group anatomy (checksum + last_updated refreshed).

How to test

cd packages/webkit && npx vitest run src/components/feedback/toast → 23 passed.
pnpm storybook:dev → Components/Feedback/Toast. On a one-line toast with an action, the icon, title and action all sit on one centred line and the card height is unchanged by the action. On a multi-line toast, the icon aligns to the title's first line, not the middle of the block. The text action's label ends flush with the card's right padding.

Notes

Visual-only; no prop, event, or slot change.

…ole row The icon and the content column now sit in an inner items-start group, so the typed glyph aligns to the title's line — its only line on a one-line toast, the first line on a multi-line one — instead of to the outer row, which the 28px action/close control stretched. The trailing region takes a negative block margin so that control no longer inflates a one-line card, and a negative inline-end margin so a text action's label ends optically flush with the card's padding instead of inset by the button's own.

Brings in the 17 commits main has since 2026-08-17 — the webkit documentation category (#919), the shared leading column for Select / MultiSelect / Dropdown (#935), resizable-panel (#902), the copy-button tooltip and card-box header inset (#936), --container-site (#923), the page-enter / content-enter arrivals (#896), the colored-icon currentColor fix (#930) and the skills that landed with them. Conflict resolution, all fifteen: Demo wins where it already carries work that is still an OPEN PR on main and main's side is the older shape that PR rewrote — toast-item (#900's `h-[1lh]` line box over #892's `self-center`), use-placement and popover.test (#932's translate anchoring over #891's prose), and the theme animation tokens, where the entry-count canary confirms every main entry survived alongside demo's. Main wins where its side is a superset or the corrected form — DESIGN.md (gains `text-body-prose-md` and `.layout-column-docs`), package.json (keeping demo's footer block would have duplicated the four keys main already merged in above it), and resizable-panel.test, whose named imports are the form that keeps CodeQL from reading a compiler-generated `.vue` default export as undefined. Both sides where each added something: .size-limit.json keeps demo's ratcheted 1.1 KB footer-root budget and takes main's fourteen doc-* entries; the ui-craft skill and the CLI plan keep demo's microcopy routing without duplicating main's entry. Generated artifacts were rebuilt rather than hand-resolved — theme dist via build:tokens, catalog.json via catalog:build — and both carry each side's tokens and all 258 exports.

gabriel-lisboa-azion · 2026-08-14T15:19:50Z

Summary

The leading severity icon aligned to the outer row, which a 28px trailing action/close control stretched — so on a one-line toast the glyph sat below the title. Icon + content column now sit in an inner items-start group; the loadingSpinner keeps self-center.
The trailing region takes -my-(--spacing-xxs) so that 28px control no longer inflates a one-line card, and -mr-(--spacing-xs) so a text action's label ends optically flush with the card padding instead of inset by the button's own.
.specs/toast.md updated to describe the two-group anatomy (checksum + last_updated refreshed).

How to test

cd packages/webkit && npx vitest run src/components/feedback/toast → 23 passed.
pnpm storybook:dev → Components/Feedback/Toast. On a one-line toast with an action, the icon, title and action all sit on one centred line and the card height is unchanged by the action. On a multi-line toast, the icon aligns to the title's first line, not the middle of the block. The text action's label ends flush with the card's right padding.

Notes

Visual-only; no prop, event, or slot change.

…ole row The icon and the content column now sit in an inner items-start group, so the typed glyph aligns to the title's line — its only line on a one-line toast, the first line on a multi-line one — instead of to the outer row, which the 28px action/close control stretched. The trailing region takes a negative block margin so that control no longer inflates a one-line card, and a negative inline-end margin so a text action's label ends optically flush with the card's padding instead of inset by the button's own.

Brings in the 17 commits main has since 2026-08-17 — the webkit documentation category (#919), the shared leading column for Select / MultiSelect / Dropdown (#935), resizable-panel (#902), the copy-button tooltip and card-box header inset (#936), --container-site (#923), the page-enter / content-enter arrivals (#896), the colored-icon currentColor fix (#930) and the skills that landed with them. Conflict resolution, all fifteen: Demo wins where it already carries work that is still an OPEN PR on main and main's side is the older shape that PR rewrote — toast-item (#900's `h-[1lh]` line box over #892's `self-center`), use-placement and popover.test (#932's translate anchoring over #891's prose), and the theme animation tokens, where the entry-count canary confirms every main entry survived alongside demo's. Main wins where its side is a superset or the corrected form — DESIGN.md (gains `text-body-prose-md` and `.layout-column-docs`), package.json (keeping demo's footer block would have duplicated the four keys main already merged in above it), and resizable-panel.test, whose named imports are the form that keeps CodeQL from reading a compiler-generated `.vue` default export as undefined. Both sides where each added something: .size-limit.json keeps demo's ratcheted 1.1 KB footer-root budget and takes main's fourteen doc-* entries; the ui-craft skill and the CLI plan keep demo's microcopy routing without duplicating main's entry. Generated artifacts were rebuilt rather than hand-resolved — theme dist via build:tokens, catalog.json via catalog:build — and both carry each side's tokens and all 258 exports.

gabriel-lisboa-azion · 2026-08-14T15:19:50Z

Summary

The leading severity icon aligned to the outer row, which a 28px trailing action/close control stretched — so on a one-line toast the glyph sat below the title. Icon + content column now sit in an inner items-start group; the loadingSpinner keeps self-center.
The trailing region takes -my-(--spacing-xxs) so that 28px control no longer inflates a one-line card, and -mr-(--spacing-xs) so a text action's label ends optically flush with the card padding instead of inset by the button's own.
.specs/toast.md updated to describe the two-group anatomy (checksum + last_updated refreshed).

How to test

cd packages/webkit && npx vitest run src/components/feedback/toast → 23 passed.
pnpm storybook:dev → Components/Feedback/Toast. On a one-line toast with an action, the icon, title and action all sit on one centred line and the card height is unchanged by the action. On a multi-line toast, the icon aligns to the title's first line, not the middle of the block. The text action's label ends flush with the card's right padding.

Notes

Visual-only; no prop, event, or slot change.

…ole row The icon and the content column now sit in an inner items-start group, so the typed glyph aligns to the title's line — its only line on a one-line toast, the first line on a multi-line one — instead of to the outer row, which the 28px action/close control stretched. The trailing region takes a negative block margin so that control no longer inflates a one-line card, and a negative inline-end margin so a text action's label ends optically flush with the card's padding instead of inset by the button's own.

Brings in the 17 commits main has since 2026-08-17 — the webkit documentation category (#919), the shared leading column for Select / MultiSelect / Dropdown (#935), resizable-panel (#902), the copy-button tooltip and card-box header inset (#936), --container-site (#923), the page-enter / content-enter arrivals (#896), the colored-icon currentColor fix (#930) and the skills that landed with them. Conflict resolution, all fifteen: Demo wins where it already carries work that is still an OPEN PR on main and main's side is the older shape that PR rewrote — toast-item (#900's `h-[1lh]` line box over #892's `self-center`), use-placement and popover.test (#932's translate anchoring over #891's prose), and the theme animation tokens, where the entry-count canary confirms every main entry survived alongside demo's. Main wins where its side is a superset or the corrected form — DESIGN.md (gains `text-body-prose-md` and `.layout-column-docs`), package.json (keeping demo's footer block would have duplicated the four keys main already merged in above it), and resizable-panel.test, whose named imports are the form that keeps CodeQL from reading a compiler-generated `.vue` default export as undefined. Both sides where each added something: .size-limit.json keeps demo's ratcheted 1.1 KB footer-root budget and takes main's fourteen doc-* entries; the ui-craft skill and the CLI plan keep demo's microcopy routing without duplicating main's entry. Generated artifacts were rebuilt rather than hand-resolved — theme dist via build:tokens, catalog.json via catalog:build — and both carry each side's tokens and all 258 exports.

gabriel-lisboa-azion · 2026-08-14T15:19:50Z

Summary

The leading severity icon aligned to the outer row, which a 28px trailing action/close control stretched — so on a one-line toast the glyph sat below the title. Icon + content column now sit in an inner items-start group; the loadingSpinner keeps self-center.
The trailing region takes -my-(--spacing-xxs) so that 28px control no longer inflates a one-line card, and -mr-(--spacing-xs) so a text action's label ends optically flush with the card padding instead of inset by the button's own.
.specs/toast.md updated to describe the two-group anatomy (checksum + last_updated refreshed).

How to test

cd packages/webkit && npx vitest run src/components/feedback/toast → 23 passed.
pnpm storybook:dev → Components/Feedback/Toast. On a one-line toast with an action, the icon, title and action all sit on one centred line and the card height is unchanged by the action. On a multi-line toast, the icon aligns to the title's first line, not the middle of the block. The text action's label ends flush with the card's right padding.

Notes

Visual-only; no prop, event, or slot change.

…ole row The icon and the content column now sit in an inner items-start group, so the typed glyph aligns to the title's line — its only line on a one-line toast, the first line on a multi-line one — instead of to the outer row, which the 28px action/close control stretched. The trailing region takes a negative block margin so that control no longer inflates a one-line card, and a negative inline-end margin so a text action's label ends optically flush with the card's padding instead of inset by the button's own.

Brings in the 17 commits main has since 2026-08-17 — the webkit documentation category (#919), the shared leading column for Select / MultiSelect / Dropdown (#935), resizable-panel (#902), the copy-button tooltip and card-box header inset (#936), --container-site (#923), the page-enter / content-enter arrivals (#896), the colored-icon currentColor fix (#930) and the skills that landed with them. Conflict resolution, all fifteen: Demo wins where it already carries work that is still an OPEN PR on main and main's side is the older shape that PR rewrote — toast-item (#900's `h-[1lh]` line box over #892's `self-center`), use-placement and popover.test (#932's translate anchoring over #891's prose), and the theme animation tokens, where the entry-count canary confirms every main entry survived alongside demo's. Main wins where its side is a superset or the corrected form — DESIGN.md (gains `text-body-prose-md` and `.layout-column-docs`), package.json (keeping demo's footer block would have duplicated the four keys main already merged in above it), and resizable-panel.test, whose named imports are the form that keeps CodeQL from reading a compiler-generated `.vue` default export as undefined. Both sides where each added something: .size-limit.json keeps demo's ratcheted 1.1 KB footer-root budget and takes main's fourteen doc-* entries; the ui-craft skill and the CLI plan keep demo's microcopy routing without duplicating main's entry. Generated artifacts were rebuilt rather than hand-resolved — theme dist via build:tokens, catalog.json via catalog:build — and both carry each side's tokens and all 258 exports.

gabriel-lisboa-azion · 2026-08-14T15:19:50Z

Summary

The leading severity icon aligned to the outer row, which a 28px trailing action/close control stretched — so on a one-line toast the glyph sat below the title. Icon + content column now sit in an inner items-start group; the loadingSpinner keeps self-center.
The trailing region takes -my-(--spacing-xxs) so that 28px control no longer inflates a one-line card, and -mr-(--spacing-xs) so a text action's label ends optically flush with the card padding instead of inset by the button's own.
.specs/toast.md updated to describe the two-group anatomy (checksum + last_updated refreshed).

How to test

cd packages/webkit && npx vitest run src/components/feedback/toast → 23 passed.
pnpm storybook:dev → Components/Feedback/Toast. On a one-line toast with an action, the icon, title and action all sit on one centred line and the card height is unchanged by the action. On a multi-line toast, the icon aligns to the title's first line, not the middle of the block. The text action's label ends flush with the card's right padding.

Notes

Visual-only; no prop, event, or slot change.

…ole row The icon and the content column now sit in an inner items-start group, so the typed glyph aligns to the title's line — its only line on a one-line toast, the first line on a multi-line one — instead of to the outer row, which the 28px action/close control stretched. The trailing region takes a negative block margin so that control no longer inflates a one-line card, and a negative inline-end margin so a text action's label ends optically flush with the card's padding instead of inset by the button's own.

Brings in the 17 commits main has since 2026-08-17 — the webkit documentation category (#919), the shared leading column for Select / MultiSelect / Dropdown (#935), resizable-panel (#902), the copy-button tooltip and card-box header inset (#936), --container-site (#923), the page-enter / content-enter arrivals (#896), the colored-icon currentColor fix (#930) and the skills that landed with them. Conflict resolution, all fifteen: Demo wins where it already carries work that is still an OPEN PR on main and main's side is the older shape that PR rewrote — toast-item (#900's `h-[1lh]` line box over #892's `self-center`), use-placement and popover.test (#932's translate anchoring over #891's prose), and the theme animation tokens, where the entry-count canary confirms every main entry survived alongside demo's. Main wins where its side is a superset or the corrected form — DESIGN.md (gains `text-body-prose-md` and `.layout-column-docs`), package.json (keeping demo's footer block would have duplicated the four keys main already merged in above it), and resizable-panel.test, whose named imports are the form that keeps CodeQL from reading a compiler-generated `.vue` default export as undefined. Both sides where each added something: .size-limit.json keeps demo's ratcheted 1.1 KB footer-root budget and takes main's fourteen doc-* entries; the ui-craft skill and the CLI plan keep demo's microcopy routing without duplicating main's entry. Generated artifacts were rebuilt rather than hand-resolved — theme dist via build:tokens, catalog.json via catalog:build — and both carry each side's tokens and all 258 exports.

gabriel-lisboa-azion · 2026-08-14T15:19:50Z

Summary

The leading severity icon aligned to the outer row, which a 28px trailing action/close control stretched — so on a one-line toast the glyph sat below the title. Icon + content column now sit in an inner items-start group; the loadingSpinner keeps self-center.
The trailing region takes -my-(--spacing-xxs) so that 28px control no longer inflates a one-line card, and -mr-(--spacing-xs) so a text action's label ends optically flush with the card padding instead of inset by the button's own.
.specs/toast.md updated to describe the two-group anatomy (checksum + last_updated refreshed).

How to test

cd packages/webkit && npx vitest run src/components/feedback/toast → 23 passed.
pnpm storybook:dev → Components/Feedback/Toast. On a one-line toast with an action, the icon, title and action all sit on one centred line and the card height is unchanged by the action. On a multi-line toast, the icon aligns to the title's first line, not the middle of the block. The text action's label ends flush with the card's right padding.

Notes

Visual-only; no prop, event, or slot change.

…ole row The icon and the content column now sit in an inner items-start group, so the typed glyph aligns to the title's line — its only line on a one-line toast, the first line on a multi-line one — instead of to the outer row, which the 28px action/close control stretched. The trailing region takes a negative block margin so that control no longer inflates a one-line card, and a negative inline-end margin so a text action's label ends optically flush with the card's padding instead of inset by the button's own.

Brings in the 17 commits main has since 2026-08-17 — the webkit documentation category (#919), the shared leading column for Select / MultiSelect / Dropdown (#935), resizable-panel (#902), the copy-button tooltip and card-box header inset (#936), --container-site (#923), the page-enter / content-enter arrivals (#896), the colored-icon currentColor fix (#930) and the skills that landed with them. Conflict resolution, all fifteen: Demo wins where it already carries work that is still an OPEN PR on main and main's side is the older shape that PR rewrote — toast-item (#900's `h-[1lh]` line box over #892's `self-center`), use-placement and popover.test (#932's translate anchoring over #891's prose), and the theme animation tokens, where the entry-count canary confirms every main entry survived alongside demo's. Main wins where its side is a superset or the corrected form — DESIGN.md (gains `text-body-prose-md` and `.layout-column-docs`), package.json (keeping demo's footer block would have duplicated the four keys main already merged in above it), and resizable-panel.test, whose named imports are the form that keeps CodeQL from reading a compiler-generated `.vue` default export as undefined. Both sides where each added something: .size-limit.json keeps demo's ratcheted 1.1 KB footer-root budget and takes main's fourteen doc-* entries; the ui-craft skill and the CLI plan keep demo's microcopy routing without duplicating main's entry. Generated artifacts were rebuilt rather than hand-resolved — theme dist via build:tokens, catalog.json via catalog:build — and both carry each side's tokens and all 258 exports.

gabriel-lisboa-azion · 2026-08-14T15:19:50Z

Summary

The leading severity icon aligned to the outer row, which a 28px trailing action/close control stretched — so on a one-line toast the glyph sat below the title. Icon + content column now sit in an inner items-start group; the loadingSpinner keeps self-center.
The trailing region takes -my-(--spacing-xxs) so that 28px control no longer inflates a one-line card, and -mr-(--spacing-xs) so a text action's label ends optically flush with the card padding instead of inset by the button's own.
.specs/toast.md updated to describe the two-group anatomy (checksum + last_updated refreshed).

How to test

cd packages/webkit && npx vitest run src/components/feedback/toast → 23 passed.
pnpm storybook:dev → Components/Feedback/Toast. On a one-line toast with an action, the icon, title and action all sit on one centred line and the card height is unchanged by the action. On a multi-line toast, the icon aligns to the title's first line, not the middle of the block. The text action's label ends flush with the card's right padding.

Notes

Visual-only; no prop, event, or slot change.

…ole row The icon and the content column now sit in an inner items-start group, so the typed glyph aligns to the title's line — its only line on a one-line toast, the first line on a multi-line one — instead of to the outer row, which the 28px action/close control stretched. The trailing region takes a negative block margin so that control no longer inflates a one-line card, and a negative inline-end margin so a text action's label ends optically flush with the card's padding instead of inset by the button's own.

Brings in the 17 commits main has since 2026-08-17 — the webkit documentation category (#919), the shared leading column for Select / MultiSelect / Dropdown (#935), resizable-panel (#902), the copy-button tooltip and card-box header inset (#936), --container-site (#923), the page-enter / content-enter arrivals (#896), the colored-icon currentColor fix (#930) and the skills that landed with them. Conflict resolution, all fifteen: Demo wins where it already carries work that is still an OPEN PR on main and main's side is the older shape that PR rewrote — toast-item (#900's `h-[1lh]` line box over #892's `self-center`), use-placement and popover.test (#932's translate anchoring over #891's prose), and the theme animation tokens, where the entry-count canary confirms every main entry survived alongside demo's. Main wins where its side is a superset or the corrected form — DESIGN.md (gains `text-body-prose-md` and `.layout-column-docs`), package.json (keeping demo's footer block would have duplicated the four keys main already merged in above it), and resizable-panel.test, whose named imports are the form that keeps CodeQL from reading a compiler-generated `.vue` default export as undefined. Both sides where each added something: .size-limit.json keeps demo's ratcheted 1.1 KB footer-root budget and takes main's fourteen doc-* entries; the ui-craft skill and the CLI plan keep demo's microcopy routing without duplicating main's entry. Generated artifacts were rebuilt rather than hand-resolved — theme dist via build:tokens, catalog.json via catalog:build — and both carry each side's tokens and all 258 exports.

gabriel-lisboa-azion requested a review from a team as a code owner August 14, 2026 15:19

github-actionsBot assigned gabriel-lisboa-azion Aug 14, 2026

gabriel-lisboa-azion mentioned this pull request Aug 17, 2026
fix(webkit): stop wrapped toast titles overlapping and pin the glyph to line one #900
Open

isaque-bock-azion approved these changes Aug 17, 2026
View reviewed changes

isaque-bock-azion added 2 commits August 17, 2026 15:31

Merge branch 'main' into fix/toast-item-alignment
09af33c

Merge branch 'main' into fix/toast-item-alignment
f968ebf

isaque-bock-azion requested a review from a teamAugust 19, 2026 23:04

guilherme-santana-azion approved these changes Aug 21, 2026
View reviewed changes

isaque-bock-azion merged commit 2a8a8db into mainAug 21, 2026
23 checks passed

isaque-bock-azion deleted the fix/toast-item-alignment branch August 21, 2026 14:27