From 93515f8c5a538285a7f3713ab116a691a24e177a Mon Sep 17 00:00:00 2001
From: natdeanlewissoftwire <nat.dean-lewis@softwire.com>
Date: Wed, 3 Jan 2024 17:06:36 +0000
Subject: [PATCH] feat: update breakpoints for responsive layout changes

---
 app/frontend/styles/_data_box.scss | 20 ++++++++---
 app/views/home/_data_box.html.erb  |  6 ++--
 app/views/home/index.html.erb      | 56 ++++++++++++++++--------------
 3 files changed, 49 insertions(+), 33 deletions(-)

diff --git a/app/frontend/styles/_data_box.scss b/app/frontend/styles/_data_box.scss
index a18c96baf..c90df19a6 100644
--- a/app/frontend/styles/_data_box.scss
+++ b/app/frontend/styles/_data_box.scss
@@ -2,22 +2,32 @@
   @include govuk-font($size: 19);
   font-weight: bold;
   white-space: nowrap;
-  width: 100%;
 }
-@media (min-width: 72.5em) {
-  .app-data-box-group {
+
+@media (min-width: 48.0625em) {
+  .app-data-box-group-one-third {
     display: flex;
     justify-content: space-between;
     column-gap: govuk-spacing(4);
+    width: 100%;
   }
 }
-@media (min-width: 72.5em) {
+@media (min-width: 66.25em) {
   .app-data-box-one-third {
     width: 33.3333333%;
     float: left;
   }
 }
-@media (min-width: 72.5em) {
+@media (min-width: 54.0625em) {
+  .app-data-box-group-one-half {
+    display: flex;
+    justify-content: space-between;
+    column-gap: govuk-spacing(4);
+    width: 100%;
+  }
+}
+
+@media (min-width: 54.0625em) {
   .app-data-box-one-half {
     width: 50%;
     float: left;
diff --git a/app/views/home/_data_box.html.erb b/app/views/home/_data_box.html.erb
index d2a26d1b4..38efb5195 100644
--- a/app/views/home/_data_box.html.erb
+++ b/app/views/home/_data_box.html.erb
@@ -1,5 +1,7 @@
-<div class="app-data-box__upper ">
-  <div class="app-data-box__count"><%= data_count(@current_user, type) %></div>
+<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__lower">
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
index 2259528dc..74ef1617f 100644
--- a/app/views/home/index.html.erb
+++ b/app/views/home/index.html.erb
@@ -6,36 +6,40 @@
         <h1 class="govuk-heading-l"><%= heading_for_user_role(@current_user) %></h1>
       </div>
       <div class="govuk-grid-row">
-      <div class="app-data-box-group">
-        <% if @current_user.support? || (@current_user.data_coordinator? && @current_user.sales_logs.present?)%>
-          <div class="app-data-box-one-third app-data-box__margin_right">
-            <span><%= render partial: "home/data_box", locals: {type: "lettings"} %></span>
-          </div>
-          <div class="app-data-box-one-third app-data-box__margin_right">
-            <span><%= render partial: "home/data_box", locals: {type: "sales"} %></span>
-          </div>
-          <div class="app-data-box-one-third">
-            <span><%= render partial: "home/data_box", locals: {type: "schemes"} %></span>
-          </div>
-        <% else %>
-          <div class="app-data-box-one-half app-data-box__margin_right">
-            <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 class="app-data-box-group">
+          <% if @current_user.support? || (@current_user.data_coordinator? && @current_user.sales_logs.present?)%>
+            <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>
+              <div class="app-data-box-one-third">
+                <span><%= render partial: "home/data_box", locals: {type: "sales"} %></span>
+              </div>
+              <div class="app-data-box-one-third">
+                <span><%= render partial: "home/data_box", locals: {type: "schemes"} %></span>
+              </div>
             </div>
           <% else %>
-            <div class="app-data-box-one-half">
-              <span><%= render partial: "home/data_box", locals: {type: "misc"} %></span>
+            <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 %>
-        <% end %>
-      </div>
+        </div>
       </div>
       <div class="govuk-grid-row">
         <hr class="govuk-section-break govuk-section-break--visible govuk-section-break--m">