docs: improve layout of the showcase

Author: json-derulo

projects/demo/src/app/app.scss

@@ -4,6 +4,9 @@
 }
 
 .demo-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
   position: sticky;
   top: 0;
   z-index: 10;
@@ -19,24 +22,28 @@
 
 .demo-toolbar__title {
   font: var(--mat-sys-title-medium);
+  min-width: 0;
 }
 
 .demo-toolbar__spacer {
-  flex: 1;
+  flex: 1 1 auto;
+  min-width: 0;
 }
 
 .theme-controls {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 1rem 1.25rem;
+  min-width: 0;
 }
 
 .theme-controls__color {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   cursor: pointer;
+  min-width: 0;
 }
 
 .theme-controls__label {
@@ -103,7 +110,7 @@
   color: var(--mat-sys-primary);
 }
 
-@media (max-width: 720px) {
+@media (max-width: 850px) {
   .demo-toolbar__title {
     display: none;
   }
@@ -112,3 +119,9 @@
     display: none;
   }
 }
+
+@media (max-width: 520px) {
+  .theme-controls__presets {
+    display: none;
+  }
+}

projects/demo/src/app/material-showcase/material-showcase.html

@@ -162,7 +162,7 @@ <h2 id="nav-heading" class="showcase-section__title">Navigation</h2>
           </a>
         </mat-nav-list>
 
-        <button matButton="outlined" [matMenuTriggerFor]="demoMenu">
+        <button class="showcase-menu" matButton="outlined" [matMenuTriggerFor]="demoMenu">
           <mat-icon>more_vert</mat-icon>
           Menu
         </button>

projects/demo/src/app/material-showcase/material-showcase.scss

@@ -1,6 +1,8 @@
 .showcase-grid {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: 1.75rem;
+  width: 100%;
 }
 
 .showcase-section__title {
@@ -73,8 +75,13 @@
   overflow: hidden;
 }
 
+.showcase-menu {
+  align-self: flex-start;
+}
+
 @media (min-width: 960px) {
   .showcase-grid {
+    display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }