From b69ba664084d36a629b3a04464ab3421755bf5ec Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Thu, 20 Jun 2024 13:36:38 -0400
Subject: [PATCH 1/2] improve home page responsiveness

---
 docs/index.md | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/docs/index.md b/docs/index.md
index a17c270da..a77442f8f 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -20,6 +20,9 @@ layout: page
       margin: 0;
     }
   }
+  wa-page:not([view="desktop"]) > main {
+    --content-flow-spacing: 3rem;
+  }
   .brand-font {
     font-family: cera-round-pro;
   }
@@ -41,7 +44,7 @@ layout: page
     background-image: linear-gradient(color-mix(in oklab, var(--wa-brand-orange), orangered 40%) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--wa-brand-orange), orangered 40%) 1px, transparent 1px);
     background-size: 2rem 2rem;
     color: white;
-    padding: 7.5rem 0 var(--content-flow-spacing) 0;
+    padding: calc(var(--content-flow-spacing) * 1.875) 0 var(--content-flow-spacing) 0;
   }
   .hero-content {
     max-width: var(--content-width);
@@ -51,7 +54,7 @@ layout: page
       margin-block-start: 2rem;
     }
     & h1 {
-      font-size: 3.25rem;
+      font-size: clamp(2.5625rem, 13vw, 3.25rem);
     }
     & .emphasis::after {
       background-color: var(--wa-brand-grey);
@@ -67,15 +70,20 @@ layout: page
     display: flex;
     align-items: center;
     gap: 1.5rem;
+    flex-wrap: wrap;
     background-color: var(--wa-brand-grey);
     border-radius: 0.75rem;
     font-size: 0.875rem;
     padding: 1.5rem;
+    & > *:first-child {
+      flex: 1 1 67%;
+    }
     & wa-button {
       --wa-form-control-height-s: 2.5rem;
       --border-color: black;
       --border-width: 0.125rem;
       --box-shadow: 0 0.25rem 0 0 var(--border-color);
+      flex: 1 1 auto;
       &:active:not([disabled]) {
         --box-shadow: 0 0 0 0 transparent;
         transform: translateY(0.25rem);
@@ -95,7 +103,7 @@ layout: page
     background-color: var(--wa-brand-grey);
     border-radius: 1.125rem;
     color: white;
-    padding: 4rem;
+    padding: var(--content-flow-spacing);
     & > * + * {
       margin-block-start: 2rem;
     }

From 4a27c5efff854d8202f6731182b085ae2e5dfebb Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Thu, 20 Jun 2024 13:56:44 -0400
Subject: [PATCH 2/2] fix breadcrumb item spacing

---
 docs/docs/components/breadcrumb.md                       | 2 +-
 src/components/breadcrumb-item/breadcrumb-item.styles.ts | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/docs/docs/components/breadcrumb.md b/docs/docs/components/breadcrumb.md
index 857985412..f6d0dfb3b 100644
--- a/docs/docs/components/breadcrumb.md
+++ b/docs/docs/components/breadcrumb.md
@@ -108,7 +108,7 @@ Dropdown menus can be placed in a prefix or suffix slot to provide additional op
   <wa-breadcrumb-item>
     Web Design
     <wa-dropdown slot="suffix">
-      <wa-button slot="trigger" size="small" pill>
+      <wa-button slot="trigger" size="small" appearance="tinted" pill>
         <wa-icon label="More options" name="ellipsis" variant="solid"></wa-icon>
       </wa-button>
       <wa-menu>
diff --git a/src/components/breadcrumb-item/breadcrumb-item.styles.ts b/src/components/breadcrumb-item/breadcrumb-item.styles.ts
index 01819c6b7..e6bfadfc1 100644
--- a/src/components/breadcrumb-item/breadcrumb-item.styles.ts
+++ b/src/components/breadcrumb-item/breadcrumb-item.styles.ts
@@ -63,8 +63,12 @@ export default css`
     display: inline-flex;
   }
 
-  ::slotted(*) {
-    margin-inline-end: var(--wa-space-s) !important;
+  ::slotted([slot='prefix']) {
+    margin-inline-end: var(--wa-space-s);
+  }
+
+  ::slotted([slot='suffix']) {
+    margin-inline-start: var(--wa-space-s);
   }
 
   :host(:last-of-type) .breadcrumb-item__separator {