mirror of
https://github.com/mattermost/mattermost.git
synced 2026-09-01 15:00:08 +08:00
[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:
+8
-1
@@ -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;
|
||||
|
||||
+5
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user