New page width is only enabled with new_homepage flag

uktrade · Aug 5, 2024 · 1f7b816 · 1f7b816
1 parent b2ac201
commit 1f7b816
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 2 deletions.
diff --git a/assets/stylesheets/components/_search_field.scss b/assets/stylesheets/components/_search_field.scss
@@ -13,7 +13,7 @@ $input-size: 40px;
     position: relative;
     display: flex;
     flex: 0 $input-size;
-    margin: 4px 0 7px 0;
+    margin: 7px 0 7px 0;
 
     input {
         // overly specific to prevent some overrides from outside

diff --git a/assets/stylesheets/components/_streamfield-content.scss b/assets/stylesheets/components/_streamfield-content.scss
@@ -1,4 +1,6 @@
 .ws-streamfield-content {
+  max-inline-size: 75ch;
+
   h3 {
     @extend %govuk-heading-s;
   }

diff --git a/assets/stylesheets/govuk-overrides/header.scss b/assets/stylesheets/govuk-overrides/header.scss
@@ -30,6 +30,9 @@
     .site-search .search-form input {
         border: 2px solid govuk-colour("black");;
     }
+    .site-search .search-form {
+        margin: 4px 0 7px 0;
+    }
 }
 
 .govuk-header {

diff --git a/src/core/templates/base.html b/src/core/templates/base.html
@@ -70,7 +70,8 @@
         {% block libraries %}
         {% endblock libraries %}
     </head>
-    <body class="govuk-template__body {% block body_classes %}{% endblock %} ">
+    <body class="govuk-template__body {% block body_classes %}{% endblock %} "
+          data-flag-new-homepage="{{ FEATURE_FLAGS.new_homepage }}">
         {% if settings.GTM_CODE %}
             <!-- Google Tag Manager (noscript) -->
             <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ settings.GTM_CODE }}"

diff --git a/src/dw_design_system/dwds/styles/layout.scss b/src/dw_design_system/dwds/styles/layout.scss
@@ -1,5 +1,15 @@
 // Container
 
+// TODO: Remove once everyone is using the new homepage.
+body[data-flag-new-homepage="False"] {
+    --page-width: 960px;
+
+    .dwds-container {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
+
 .dwds-container {
     max-width: var(--page-width);
     margin-left: auto;