From 4be8a46cdd8f6496a6cfc21d3d54131a43e7b091 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Wed, 11 Dec 2024 10:32:09 -0500
Subject: [PATCH 1/2] touch up media example page

---
 docs/docs/components/page.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/docs/docs/components/page.md b/docs/docs/components/page.md
index 24ebcb8a9..3bccde96d 100644
--- a/docs/docs/components/page.md
+++ b/docs/docs/components/page.md
@@ -585,7 +585,7 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
 
 <style>
   wa-page {
-    --menu-width: 18rem;
+    --menu-width: 30ch;
     --wa-tooltip-arrow-size: 0;
     background-color: var(--wa-color-surface-lowered);
   }
@@ -680,7 +680,10 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
     border: none;
     color: var(--wa-color-brand-on-loud);
     font-size: 3rem;
-    padding: 1.5rem;
+    padding: 0.5em 0.45em 0.5em 0.55em;
+  }
+  [slot='main-footer'].wa-grid > * {
+    max-inline-size: 30ch;
   }
 </style>
 ```

From 968930c54354b3ec339198ff1acd134614c3400a Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Wed, 11 Dec 2024 10:52:46 -0500
Subject: [PATCH 2/2] improve responsiveness of media example page

---
 docs/docs/components/page.md | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/docs/docs/components/page.md b/docs/docs/components/page.md
index 3bccde96d..bfece86ff 100644
--- a/docs/docs/components/page.md
+++ b/docs/docs/components/page.md
@@ -295,7 +295,7 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
       <wa-icon name="record-vinyl"></wa-icon>
       <span class="wa-heading-m">radiogaga</span>
     </div>
-    <wa-input placeholder="Search" style="max-inline-size: 100%;">
+    <wa-input id="search-header" placeholder="Search" style="max-inline-size: 100%;">
       <wa-icon slot="prefix" name="magnifying-glass" ></wa-icon>
     </wa-input>
     <div class="wa-cluster">
@@ -304,8 +304,13 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
     </div>
   </header>
   <div slot="navigation-header" class="wa-split">
-    <h2 class="wa-heading-s">For You</h2>
-    <wa-icon-button id="settings" name="gear" label="Settings"></wa-icon-button>
+    <wa-input id="search-nav-drawer" placeholder="Search" style="max-inline-size: 100%;">
+      <wa-icon slot="prefix" name="magnifying-glass" ></wa-icon>
+    </wa-input>
+    <div class="wa-split">
+      <h2 class="wa-heading-s">For You</h2>
+      <wa-icon-button id="settings" name="gear" label="Settings"></wa-icon-button>
+    </div>
   </div>
   <nav slot="navigation">
     <h3 class="wa-heading-xs">Discover</h3>
@@ -399,7 +404,7 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
   </div>
   <main>
     <div class="wa-stack wa-gap-3xl">
-      <div class="wa-flank wa-gap-3xl" style="--flank-size: 35%; --content-percentage: 55%;">
+      <div class="wa-flank wa-gap-3xl" style="--content-percentage: 40%;">
         <div class="wa-frame wa-border-radius-l" style="max-inline-size: 40ch;">
           <img src="https://images.unsplash.com/photo-1732430579016-8d5e5ebd3c99?q=20" alt="Home for the Holidays album artwork" />
         </div>
@@ -589,12 +594,18 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
     --wa-tooltip-arrow-size: 0;
     background-color: var(--wa-color-surface-lowered);
   }
-  wa-page[view='desktop'] [data-toggle-nav] {
+  wa-page[view='desktop'] :is([data-toggle-nav], #search-nav-drawer) {
     display: none;
   }
   wa-page[view='mobile'] {
     --menu-width: auto;
   }
+  wa-page[view='mobile'] #search-header {
+    display: none;
+  }
+  wa-page[view='mobile'] :is([slot*='main'], main) {
+    padding: var(--wa-space-xl);
+  }
   wa-page,
   [slot='header'],
   wa-page[view='desktop'] [slot*='navigation'] {
@@ -611,7 +622,8 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
   }
   [slot='navigation-header'],
   [slot='main-header'] {
-    padding-block-end: 0;
+    padding-block-end: 0 !important;
+    padding-block-start: var(--wa-space-3xl);
   }
   [slot='navigation'] a {
     --wa-color-text-link: var(--wa-color-text-normal);