Skip to content

Commit 3f717f9

Browse files
authored
docs(multiple): fix examples on small screens (angular#31741)
1 parent 8e9fc04 commit 3f717f9

File tree

6 files changed

+8
-2
lines changed

6 files changed

+8
-2
lines changed

src/components-examples/cdk-experimental/listbox/cdk-listbox-configurable/cdk-listbox-configurable-example.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.example-listbox-controls {
22
display: flex;
3+
flex-wrap: wrap;
34
align-items: center;
45
gap: 16px;
56
padding-bottom: 16px;

src/components-examples/cdk-experimental/radio-group/radio-common.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.example-radio-controls {
22
display: flex;
3+
flex-wrap: wrap;
34
align-items: center;
45
gap: 16px;
56
padding-bottom: 16px;

src/components-examples/cdk-experimental/tabs/cdk-tabs-common.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.example-tablist-controls {
22
display: flex;
3+
flex-wrap: wrap;
34
align-items: center;
45
gap: 16px;
56
padding-bottom: 16px;

src/components-examples/cdk-experimental/toolbar/toolbar-common.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88

99
.example-toolbar-controls {
1010
display: flex;
11+
flex-wrap: wrap;
1112
align-items: center;
1213
gap: 16px;
1314
padding-bottom: 4px;

src/components-examples/cdk-experimental/tree/tree-common.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.example-tree-controls {
22
display: flex;
3+
flex-wrap: wrap;
34
align-items: center;
45
gap: 16px;
56
margin-bottom: 16px;
@@ -16,6 +17,8 @@
1617
padding: 10px;
1718
border: 1px solid var(--mat-sys-outline);
1819
border-radius: var(--mat-sys-corner-extra-small);
20+
overflow-x: scroll;
21+
min-width: 24rem;
1922
}
2023

2124
.example-tree-item {

src/dev-app/cdk-experimental-tree/cdk-tree-demo.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
.example-tree-grid {
22
display: grid;
3-
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
3+
grid-template-columns: repeat(auto-fit, 100%);
44
gap: 20px;
55
}
66

77
.example-tree-container {
8-
width: 500px;
98
display: flex;
109
flex-direction: column;
1110
justify-content: flex-start;

0 commit comments

Comments
 (0)