From c738088619da5e69eff67f233797ef0e2bac00cd Mon Sep 17 00:00:00 2001
From: natdeanlewissoftwire <nat.dean-lewis@softwire.com>
Date: Mon, 8 Jan 2024 08:52:37 +0000
Subject: [PATCH] Revert "Reuse govuk grid"

This reverts commit 8c71f5d9edf261802a8a86e07c13552f51283668.
---
 app/frontend/styles/_data_box.scss | 55 ++++++++++++++++++++++++++----
 app/views/home/_data_box.html.erb  |  4 +--
 app/views/home/index.html.erb      | 53 +++++++++++++++-------------
 3 files changed, 80 insertions(+), 32 deletions(-)

diff --git a/app/frontend/styles/_data_box.scss b/app/frontend/styles/_data_box.scss
index 9bfb861ed..f9003f99e 100644
--- a/app/frontend/styles/_data_box.scss
+++ b/app/frontend/styles/_data_box.scss
@@ -1,5 +1,53 @@
+.app-data-box-group {
+  @include govuk-font($size: 19);
+  font-weight: bold;
+  white-space: nowrap;
+}
+
+@media (min-width: 54.0625em) {
+  .app-data-box-group-one-third {
+    display: flex;
+    justify-content: space-between;
+    column-gap: govuk-spacing(4);
+    width: 100%;
+    min-width: 733.33px;
+  }
+}
+@media (min-width: 54.0625em) {
+  .app-data-box-one-third {
+    width: 33.3333333%;
+    float: left;
+  }
+}
+@media (min-width: 54.0625em) {
+  .app-data-box__underline {
+    min-width: 733.33px;
+  }
+}
+@media (min-width: 54.0625em) {
+  .app-data-box-group-one-half {
+    display: flex;
+    justify-content: space-between;
+    column-gap: govuk-spacing(4);
+    width: 100%;
+    min-width: 733.33px;
+  }
+}
+@media (min-width: 54.0625em) {
+  .app-data-box-one-half {
+    width: 50%;
+    float: left;
+  }
+}
+@media (min-width: 54.0625em) {
+  .app-data-box-one-half__underline {
+    min-width: 733.33px;
+  }
+}
+
 .app-data-box__upper {
   @include govuk-responsive-margin(2, "bottom");
+  @include govuk-responsive-padding(4);
 
   background-color: govuk-colour("light-grey");
   color: govuk-colour("blue");
@@ -7,16 +55,11 @@
 
 .app-data-box__lower {
   @include govuk-responsive-margin(4, "bottom");
+  @include govuk-responsive-padding(4);
 
   background-color: govuk-colour("blue");
 }
 
-.app-data-box {
-  @include govuk-responsive-padding(4);
-  font-weight: bold;
-  white-space: nowrap;
-}
-
 .app-data-box__count {
   font-size: 48px;
   color: govuk-colour("blue");
diff --git a/app/views/home/_data_box.html.erb b/app/views/home/_data_box.html.erb
index fdd13d1a6..38efb5195 100644
--- a/app/views/home/_data_box.html.erb
+++ b/app/views/home/_data_box.html.erb
@@ -1,9 +1,9 @@
-<div class="app-data-box app-data-box__upper">
+<div class="app-data-box__upper">
   <div class="app-data-box__count">
     <a><%= govuk_link_to data_count(@current_user, type), data_path(@current_user, type), class: "govuk-link--no-visited-state govuk-link--no-underline" %></a>
   </div>
   <a><%= govuk_link_to data_subheading(@current_user, type), data_path(@current_user, type), class: "govuk-link--no-visited-state" %></a>
 </div>
-<div class="app-data-box app-data-box__lower">
+<div class="app-data-box__lower">
   <%= govuk_link_to view_all_text(type), view_all_path(type), class: "govuk-link--inverse" %>
 </div>
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
index b5bbb139e..6aaa65349 100644
--- a/app/views/home/index.html.erb
+++ b/app/views/home/index.html.erb
@@ -1,43 +1,48 @@
 <div class="govuk-grid-row">
   <div class="govuk-width-container">
+    <div class="govuk-grid-column-two-thirds">
       <div class="govuk-grid-row govuk-!-margin-bottom-7">
         <span class="govuk-body-l"><%= "Welcome back, #{@current_user.name}" %></span>
         <h1 class="govuk-heading-l"><%= heading_for_user_role(@current_user) %></h1>
       </div>
       <div class="govuk-grid-row">
-        <div class="govuk-grid-column-three-quarters-from-desktop govuk-!-padding-left-0 govuk-!-padding-right-0">
+        <div class="app-data-box-group">
           <% if @current_user.support? || (@current_user.data_coordinator? && @current_user.sales_logs.present?) %>
-            <div class="govuk-grid-column-one-third govuk-!-padding-left-0">
-              <span><%= render partial: "home/data_box", locals: { type: "lettings" } %></span>
-            </div>
-            <div class="govuk-grid-column-one-third govuk-!-padding-left-0">
-              <span><%= render partial: "home/data_box", locals: { type: "sales" } %></span>
-            </div>
-            <div class="govuk-grid-column-one-third govuk-!-padding-left-0">
-              <span><%= render partial: "home/data_box", locals: { type: "schemes" } %></span>
-            </div>
-          <% else %>
-            <div class="govuk-grid-column-one-half govuk-!-padding-left-0">
-              <span><%= render partial: "home/data_box", locals: { type: "lettings" } %></span>
-            </div>
-            <% if @current_user.data_coordinator? %>
-              <div class="govuk-grid-column-one-half govuk-!-padding-left-0">
-                <span><%= render partial: "home/data_box", locals: { type: "schemes" } %></span>
+            <div class="app-data-box-group-one-third">
+              <div class="app-data-box-one-third">
+                <span><%= render partial: "home/data_box", locals: { type: "lettings" } %></span>
               </div>
-            <% elsif @current_user.sales_logs.present? %>
-              <div class="govuk-grid-column-one-half govuk-!-padding-left-0">
+              <div class="app-data-box-one-third">
                 <span><%= render partial: "home/data_box", locals: { type: "sales" } %></span>
               </div>
-            <% else %>
-              <div class="govuk-grid-column-one-half govuk-!-padding-left-0">
-                <span><%= render partial: "home/data_box", locals: { type: "misc" } %></span>
+              <div class="app-data-box-one-third">
+                <span><%= render partial: "home/data_box", locals: { type: "schemes" } %></span>
               </div>
-            <% end %>
+            </div>
+          <% else %>
+            <div class="app-data-box-group-one-half">
+              <div class="app-data-box-one-half">
+                <span><%= render partial: "home/data_box", locals: { type: "lettings" } %></span>
+              </div>
+              <% if @current_user.data_coordinator? %>
+                <div class="app-data-box-one-half">
+                  <span><%= render partial: "home/data_box", locals: { type: "schemes" } %></span>
+                </div>
+              <% elsif @current_user.sales_logs.present? %>
+                <div class="app-data-box-one-half">
+                  <span><%= render partial: "home/data_box", locals: { type: "sales" } %></span>
+                </div>
+              <% else %>
+                <div class="app-data-box-one-half">
+                  <span><%= render partial: "home/data_box", locals: { type: "misc" } %></span>
+                </div>
+              <% end %>
+            </div>
           <% end %>
         </div>
       </div>
       <div class="govuk-grid-row">
-        <div class="govuk-grid-column-three-quarters-from-desktop govuk-!-padding-left-0">
+        <div class="app-data-box__underline">
           <hr class="govuk-section-break govuk-section-break--visible govuk-section-break--m">
         </div>
       </div>