updates

Author: ramkrishnsaini

app/globals.css

@@ -281,6 +281,14 @@ a:hover {
     font-size: 0.75rem;
   }
 
+  /* Breadcrumb links: global 44px touch floor makes crumbs + current-page span misalign; keep one compact line */
+  nav[aria-label="Breadcrumb"] a {
+    min-height: unset;
+    display: inline-flex;
+    align-items: center;
+    padding-block: 0.2rem;
+  }
+
   /* Footer: don't let 'span 2' overflow a single-column grid */
   .footer-about-col {
     grid-column: span 1 !important;

components/Breadcrumb.tsx

@@ -37,25 +37,30 @@ export default function Breadcrumb({ items }: BreadcrumbProps) {
         }}
       >
         <ol
+          className="bc-trail"
           style={{
             width: '100%',
             maxWidth: 'var(--pts-content-max)',
             margin: '0 auto',
             display: 'flex',
-            flexWrap: 'wrap',
+            flexWrap: 'nowrap',
             alignItems: 'center',
             gap: '0 0.3rem',
             listStyle: 'none',
             fontSize: '0.8rem',
             color: 'var(--pts-text-subtle)',
+            overflowX: 'auto',
+            overflowY: 'hidden',
+            WebkitOverflowScrolling: 'touch',
+            scrollbarGutter: 'stable',
           }}
         >
           {items.map((item, i) => {
             const isLast = i === items.length - 1;
             return (
               <li
                 key={i}
-                style={{ display: 'flex', alignItems: 'center', gap: '0.3rem' }}
+                style={{ display: 'flex', alignItems: 'center', gap: '0.3rem', flexShrink: 0 }}
               >
                 {i > 0 && (
                   <span aria-hidden style={{ color: 'var(--pts-border-strong)', userSelect: 'none' }}>
@@ -72,10 +77,15 @@ export default function Breadcrumb({ items }: BreadcrumbProps) {
                     style={{
                       color: isLast ? 'var(--pts-text-muted)' : 'var(--pts-text-subtle)',
                       fontWeight: isLast ? 500 : 400,
-                      maxWidth: '22ch',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
                       whiteSpace: 'nowrap',
+                      ...(isLast
+                        ? {
+                            /* one line with trail; scroll parent .bc-trail if long */
+                            maxWidth: 'min(70vw, 40rem)',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                          }
+                        : {}),
                     }}
                   >
                     {item.label}

components/HeroHomeSplit.tsx

@@ -180,12 +180,8 @@ export default function HeroHomeSplit() {
             flex-direction: column;
             min-height: 0;
             width: 100%;
-          }
-          /* Space between stacked hero (copy + dashboard) and dark feature bar on small screens */
-          @media (max-width: 1023px) {
-            .hero-split-inner {
-              gap: clamp(1.5rem, 5vw, 2.5rem);
-            }
+            /* space before dark trust strip — was only <1024px; iPad landscape (≥1024) had none */
+            gap: clamp(1.35rem, 4vw, 2.5rem);
           }
           /* Fills space above the trust bar and vertically centers the grid — no mint gap under copy */
           .hero-split-center {