Skip to content
This repository was archived by the owner on Mar 25, 2025. It is now read-only.

Commit 2dce76c

Browse files
Anton Bilovusboilund
authored andcommitted
fix(select): apply overflow hidden to MultiSelect chips
Apply `overflow: hidden` to the chips inside the multiselect so that it does not grow unnecessary and pushes its internal components outside the container. Fixes: #195
1 parent 5d22596 commit 2dce76c

File tree

2 files changed

+16
-0
lines changed

2 files changed

+16
-0
lines changed

packages/core/src/Select/MultiSelect.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,14 @@ const SelectInsideContainer = styled.div`
4646
display: flex;
4747
justify-content: space-between;
4848
align-items: center;
49+
overflow: hidden;
4950
`
5051

5152
const ChipContainer = styled.div`
5253
display: flex;
5354
flex-grow: 1;
5455
flex-wrap: wrap;
56+
overflow: hidden;
5557
`
5658

5759
const IconsContainer = styled.div`

packages/core/src/Select/__snapshots__/MultiSelect.test.tsx.snap

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,7 @@ exports[`Select Direction 1`] = `
218218
-webkit-box-align: center;
219219
-ms-flex-align: center;
220220
align-items: center;
221+
overflow: hidden;
221222
}
222223
223224
.c7 {
@@ -232,6 +233,7 @@ exports[`Select Direction 1`] = `
232233
-webkit-flex-wrap: wrap;
233234
-ms-flex-wrap: wrap;
234235
flex-wrap: wrap;
236+
overflow: hidden;
235237
}
236238
237239
.c14 {
@@ -609,6 +611,7 @@ exports[`Select Direction 2`] = `
609611
-webkit-box-align: center;
610612
-ms-flex-align: center;
611613
align-items: center;
614+
overflow: hidden;
612615
}
613616
614617
.c7 {
@@ -623,6 +626,7 @@ exports[`Select Direction 2`] = `
623626
-webkit-flex-wrap: wrap;
624627
-ms-flex-wrap: wrap;
625628
flex-wrap: wrap;
629+
overflow: hidden;
626630
}
627631
628632
.c14 {
@@ -1007,6 +1011,7 @@ exports[`Select Other 1`] = `
10071011
-webkit-box-align: center;
10081012
-ms-flex-align: center;
10091013
align-items: center;
1014+
overflow: hidden;
10101015
}
10111016
10121017
.c7 {
@@ -1021,6 +1026,7 @@ exports[`Select Other 1`] = `
10211026
-webkit-flex-wrap: wrap;
10221027
-ms-flex-wrap: wrap;
10231028
flex-wrap: wrap;
1029+
overflow: hidden;
10241030
}
10251031
10261032
.c14 {
@@ -1412,6 +1418,7 @@ exports[`Select Other 2`] = `
14121418
-webkit-box-align: center;
14131419
-ms-flex-align: center;
14141420
align-items: center;
1421+
overflow: hidden;
14151422
}
14161423
14171424
.c7 {
@@ -1426,6 +1433,7 @@ exports[`Select Other 2`] = `
14261433
-webkit-flex-wrap: wrap;
14271434
-ms-flex-wrap: wrap;
14281435
flex-wrap: wrap;
1436+
overflow: hidden;
14291437
}
14301438
14311439
.c14 {
@@ -1803,6 +1811,7 @@ exports[`Select Width 1`] = `
18031811
-webkit-box-align: center;
18041812
-ms-flex-align: center;
18051813
align-items: center;
1814+
overflow: hidden;
18061815
}
18071816
18081817
.c7 {
@@ -1817,6 +1826,7 @@ exports[`Select Width 1`] = `
18171826
-webkit-flex-wrap: wrap;
18181827
-ms-flex-wrap: wrap;
18191828
flex-wrap: wrap;
1829+
overflow: hidden;
18201830
}
18211831
18221832
.c14 {
@@ -2194,6 +2204,7 @@ exports[`Select Width 2`] = `
21942204
-webkit-box-align: center;
21952205
-ms-flex-align: center;
21962206
align-items: center;
2207+
overflow: hidden;
21972208
}
21982209
21992210
.c7 {
@@ -2208,6 +2219,7 @@ exports[`Select Width 2`] = `
22082219
-webkit-flex-wrap: wrap;
22092220
-ms-flex-wrap: wrap;
22102221
flex-wrap: wrap;
2222+
overflow: hidden;
22112223
}
22122224
22132225
.c14 {
@@ -2617,6 +2629,7 @@ exports[`Select Width 3`] = `
26172629
-webkit-box-align: center;
26182630
-ms-flex-align: center;
26192631
align-items: center;
2632+
overflow: hidden;
26202633
}
26212634
26222635
.c7 {
@@ -2631,6 +2644,7 @@ exports[`Select Width 3`] = `
26312644
-webkit-flex-wrap: wrap;
26322645
-ms-flex-wrap: wrap;
26332646
flex-wrap: wrap;
2647+
overflow: hidden;
26342648
}
26352649
26362650
.c14 {

0 commit comments

Comments
 (0)