[MM-69610] Fix membership policy value chips wrapping onto multiple lines (#37320)

* [MM-69610] Keep membership policy value chips on a single row

The Values cell in the channel membership policy table editor used
flex-wrap: wrap on the chip container, so multiple values wrapped onto
additional lines and expanded the table row height unpredictably.

Constrain the chip container to a single line with horizontal overflow
scrolling so the row height stays consistent regardless of how many
values are added.

Co-authored-by: mattermost-code <matty-code@mattermost.com>

* [MM-69610] Satisfy stylelint property order for chip container

Co-authored-by: mattermost-code <matty-code@mattermost.com>

* [MM-69610] Wrap membership policy value chips instead of horizontal scroll

Address review feedback: forcing chips onto a single line with horizontal
scroll let the values cell push the table beyond the modal width. Revert the
chip container to wrap onto new lines and set table-layout: fixed so columns
respect their declared widths; the row now grows vertically within the modal
instead of expanding horizontally.

* [MM-69610] Let value selector row grow to fit wrapped chips

The shared selector button was fixed at height 40px, so wrapped chips
spilled outside the row. Use min-height so the values row expands
vertically to fit all chips while single-value selectors stay at 40px.

* Override .btn fixed height so wrapped chips can grow the row

The shared .btn class sets height: 40px, which prevented min-height
alone from letting the value selector expand when chips wrap. Add
height: auto on .field-selector-menu-button to override it.

Co-authored-by: mattermost-code <matty-code@mattermost.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: mattermost-code <matty-code@mattermost.com>
This commit is contained in:
cursor[bot]
2026-07-20 07:31:20 +05:30
committed by GitHub
parent 2851af059d
commit f4e141cc1d
2 changed files with 13 additions and 1 deletions
@@ -5,7 +5,8 @@
.field-selector-menu-button {
width: 100%;
height: 40px;
height: auto;
min-height: 40px;
justify-content: start;
border: none;
font-weight: normal;
@@ -33,9 +34,13 @@
}
.value-selector-menu-button {
// Chips wrap onto new lines within the fixed-width Values cell so the
// table never expands horizontally past the modal. The row grows
// vertically to fit however many values are added.
&__multi-values-container {
display: flex;
overflow: hidden;
min-width: 0;
flex-grow: 1;
flex-wrap: wrap;
gap: 2px;
@@ -44,6 +49,7 @@
&__inner-wrapper {
display: flex;
width: 100%;
min-width: 0;
align-items: center;
justify-content: space-between;
}
@@ -77,6 +83,7 @@
.select__multi-value {
display: flex;
height: 24px;
flex: 0 0 auto;
align-items: center;
border-radius: 4px;
margin: 2px;
@@ -6,6 +6,11 @@
border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
border-radius: 4px;
border-collapse: collapse;
// Fixed layout keeps columns at their declared widths so long value
// lists wrap within the Values cell instead of stretching the table
// beyond the modal width.
table-layout: fixed;
}
th {