From 88ffa841504c76d5e04f5d7f2f628acdcc19e113 Mon Sep 17 00:00:00 2001
From: Wyatt Pearsall <wyatt.pearsall@cfpb.gov>
Date: Fri, 31 Jan 2025 10:51:32 -0800
Subject: [PATCH] Set margin/padding properly on mobile breadcrumbs

---
 cfgov/tccp/jinja2/tccp/cards.html             |  4 ----
 .../css/enhancements/layout-base.scss         | 19 ++++++++-----------
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/cfgov/tccp/jinja2/tccp/cards.html b/cfgov/tccp/jinja2/tccp/cards.html
index c62a8addd80..5b5027ba63b 100644
--- a/cfgov/tccp/jinja2/tccp/cards.html
+++ b/cfgov/tccp/jinja2/tccp/cards.html
@@ -31,10 +31,6 @@
 <link rel="stylesheet" href="{{ static('apps/tccp/css/main.css') }}">
 {% endblock %}
 
-{% block content_modifiers -%}
-    {{ super() }} u-layout-grid--full-width-breadcrumbs
-{%- endblock %}
-
 {% block content_main_modifiers -%}
     {{ super() }} htmx-container
 {%- endblock %}
diff --git a/cfgov/unprocessed/css/enhancements/layout-base.scss b/cfgov/unprocessed/css/enhancements/layout-base.scss
index c5f3ba231f7..19b0465a559 100644
--- a/cfgov/unprocessed/css/enhancements/layout-base.scss
+++ b/cfgov/unprocessed/css/enhancements/layout-base.scss
@@ -46,10 +46,10 @@
     // Tablet and below.
     @include respond-to-max($bp-sm-max) {
       &__breadcrumbs {
-        padding-left: math.div(30px, $base-font-size-px) + rem;
-        padding-right: math.div(30px, $base-font-size-px) + rem;
-        margin-left: math.div(-30px, $base-font-size-px) + rem;
-        margin-right: math.div(-30px, $base-font-size-px) + rem;
+        padding-left: math.div(15px, $base-font-size-px) + rem;
+        padding-right: math.div(15px, $base-font-size-px) + rem;
+        margin-left: math.div(-15px, $base-font-size-px) + rem;
+        margin-right: math.div(-15px, $base-font-size-px) + rem;
         background: var(--gray-5);
         border-bottom: 1px solid var(--gray-40);
       }
@@ -58,8 +58,10 @@
     // Tablet only.
     @include respond-to-range($bp-sm-min, $bp-sm-max) {
       &__breadcrumbs {
-        padding-left: math.div(15px, $base-font-size-px) + rem;
-        padding-right: math.div(15px, $base-font-size-px) + rem;
+        padding-left: math.div(30px, $base-font-size-px) + rem;
+        padding-right: math.div(30px, $base-font-size-px) + rem;
+        margin-left: math.div(-30px, $base-font-size-px) + rem;
+        margin-right: math.div(-30px, $base-font-size-px) + rem;
       }
     }
 
@@ -100,11 +102,6 @@
     }
   }
 
-  // Modifier to allow breadcrumbs on full-width layouts, as in TCCP
-  .u-layout-grid--full-width-breadcrumbs {
-    overflow-x: hidden;
-  }
-
   // Set default line width.
   .u-layout-grid__main,
   .u-layout-grid__content-intro {