Merge pull request #8732 from cfpb/tccp/fix-overflow

TCCP: Fix mobile horizontal scroll in card list
cfpb · Jan 31, 2025 · 1358275 · 1358275
2 parents fff210f + dfbc486
commit 1358275
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/cfgov/tccp/jinja2/tccp/cards.html b/cfgov/tccp/jinja2/tccp/cards.html
@@ -31,6 +31,10 @@
 <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
@@ -100,6 +100,11 @@
     }
   }
 
+  // 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 {