From 08db08a249a04796e4def48215e741aee8f0d26e Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Wed, 20 Aug 2025 14:43:37 -0400
Subject: [PATCH] docs(multiple): fix examples on small screens

---
 .../cdk-listbox-configurable-example.css                       | 1 +
 .../cdk-experimental/radio-group/radio-common.css              | 1 +
 .../cdk-experimental/tabs/cdk-tabs-common.css                  | 1 +
 .../cdk-experimental/toolbar/toolbar-common.css                | 1 +
 src/components-examples/cdk-experimental/tree/tree-common.css  | 3 +++
 src/dev-app/cdk-experimental-tree/cdk-tree-demo.css            | 3 +--
 6 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox-configurable/cdk-listbox-configurable-example.css b/src/components-examples/cdk-experimental/listbox/cdk-listbox-configurable/cdk-listbox-configurable-example.css
index efc62874359a..b0eeab4574b2 100644
--- a/src/components-examples/cdk-experimental/listbox/cdk-listbox-configurable/cdk-listbox-configurable-example.css
+++ b/src/components-examples/cdk-experimental/listbox/cdk-listbox-configurable/cdk-listbox-configurable-example.css
@@ -1,5 +1,6 @@
 .example-listbox-controls {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 16px;
   padding-bottom: 16px;
diff --git a/src/components-examples/cdk-experimental/radio-group/radio-common.css b/src/components-examples/cdk-experimental/radio-group/radio-common.css
index 6d4d6c4c36b4..35d90bdb095e 100644
--- a/src/components-examples/cdk-experimental/radio-group/radio-common.css
+++ b/src/components-examples/cdk-experimental/radio-group/radio-common.css
@@ -1,5 +1,6 @@
 .example-radio-controls {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 16px;
   padding-bottom: 16px;
diff --git a/src/components-examples/cdk-experimental/tabs/cdk-tabs-common.css b/src/components-examples/cdk-experimental/tabs/cdk-tabs-common.css
index 938f2cf71a2e..e39c765002ff 100644
--- a/src/components-examples/cdk-experimental/tabs/cdk-tabs-common.css
+++ b/src/components-examples/cdk-experimental/tabs/cdk-tabs-common.css
@@ -1,5 +1,6 @@
 .example-tablist-controls {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 16px;
   padding-bottom: 16px;
diff --git a/src/components-examples/cdk-experimental/toolbar/toolbar-common.css b/src/components-examples/cdk-experimental/toolbar/toolbar-common.css
index 7936afc0b28c..07b054788bd6 100644
--- a/src/components-examples/cdk-experimental/toolbar/toolbar-common.css
+++ b/src/components-examples/cdk-experimental/toolbar/toolbar-common.css
@@ -8,6 +8,7 @@
 
 .example-toolbar-controls {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 16px;
   padding-bottom: 4px;
diff --git a/src/components-examples/cdk-experimental/tree/tree-common.css b/src/components-examples/cdk-experimental/tree/tree-common.css
index 6f936085d232..cb7375479822 100644
--- a/src/components-examples/cdk-experimental/tree/tree-common.css
+++ b/src/components-examples/cdk-experimental/tree/tree-common.css
@@ -1,5 +1,6 @@
 .example-tree-controls {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 16px;
   margin-bottom: 16px;
@@ -16,6 +17,8 @@
   padding: 10px;
   border: 1px solid var(--mat-sys-outline);
   border-radius: var(--mat-sys-corner-extra-small);
+  overflow-x: scroll;
+  min-width: 24rem;
 }
 
 .example-tree-item {
diff --git a/src/dev-app/cdk-experimental-tree/cdk-tree-demo.css b/src/dev-app/cdk-experimental-tree/cdk-tree-demo.css
index d20f23bdfdd4..f8a48cfb9014 100644
--- a/src/dev-app/cdk-experimental-tree/cdk-tree-demo.css
+++ b/src/dev-app/cdk-experimental-tree/cdk-tree-demo.css
@@ -1,11 +1,10 @@
 .example-tree-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  grid-template-columns: repeat(auto-fit, 100%);
   gap: 20px;
 }
 
 .example-tree-container {
-  width: 500px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;