The hidden __message (max-height:0, opacity:0) still had white-space:
pre-wrap which contributed to flex intrinsic width calculation in compact
layout, causing the __content flex container to miscalculate width and
truncate the title to 'ST...'.
Also add flex:0 1 auto + min-width:0 to compact __title so it properly
shrinks with ellipsis instead of overflow when space is limited.
Root cause: compact layout used width:fit-content on parent with
overflow:hidden + min-width:0 on __content flex child. In flex, min-width:0
allows the child to shrink to 0, and fit-content + overflow:hidden causes
the content to collapse completely, showing only 'ST...' for the title.
Fix: Replace width:fit-content with max-width on the compact parent so
the container can size naturally. Give __content flex:1 1 0% so it takes
all available space after icon/close button, letting the title fill that
space and ellipsis only when it genuinely overflows.
Root causes:
1. Duplicate .st-bme-notice__title and .st-bme-notice__message blocks (from
original code) were overriding the new transition-enabled versions,
stripping transitions and causing missing overflow:hidden on __message.
2. .st-bme-notice::after pseudo-element CSS was accidentally merged into
.st-bme-notice__message--marquee block during previous edit.
3. Compact layout .st-bme-notice__content had overflow:hidden with no
min-width constraint, causing the title to collapse to 'ST...'.
Fixes:
- Removed all duplicate CSS blocks; single canonical definitions with transitions
- Restored ::after pseudo-element as separate rule
- Added max-width:320px with overflow:hidden explicitly for compact content
- Added normal content max-width:360px with overflow:hidden
- Restored missing .st-bme-notice__actions base rule with transition
- Added .st-bme-notice__message overflow:hidden for max-height animation
