Fix uncontained text overflow in column header (#39356)

This commit is contained in:
diondiondion 2026-06-10 14:03:47 +02:00 committed by GitHub
parent 9f7e2d0002
commit bff9f0eb6d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 9 additions and 4 deletions

View File

@ -272,7 +272,7 @@ export const ColumnHeader: React.FC<Props> = ({
{!backButton && hasIcon && ( {!backButton && hasIcon && (
<Icon id={icon} icon={iconComponent} className='column-header__icon' /> <Icon id={icon} icon={iconComponent} className='column-header__icon' />
)} )}
{title} <span className='column-header__text'>{title}</span>
</> </>
); );

View File

@ -4641,6 +4641,7 @@ a.status-card {
&__title-wrapper { &__title-wrapper {
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
min-width: 0;
} }
&__title { &__title {
@ -4656,9 +4657,7 @@ a.status-card {
background: transparent; background: transparent;
font: inherit; font: inherit;
text-align: start; text-align: start;
text-overflow: ellipsis; min-width: 0;
overflow: hidden;
white-space: nowrap;
&--with-back-button { &--with-back-button {
padding-inline-start: 0; padding-inline-start: 0;
@ -4673,6 +4672,12 @@ a.status-card {
} }
} }
&__text {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.column-header__back-button { .column-header__back-button {
flex: 1; flex: 1;
color: var(--color-text-brand); color: var(--color-text-brand);