Fix alignment of columns in the More links component on homepage

In tablet view and above, the columns in this component were
misaligned with the columns in the Featured component above.
This is due to two incompatible layout approaches.

Several approaches to align these elements were investigated,
using combinations of float based layouts and CSS grid. However
these approaches did not yield any compatible alignments,
possibly due to differences in how browsers calculate `%`
widths vs `fr` widths.

The fix was to use CSS `columns` with a `column-gap` matching
the gutter in the row/columns layout classes, and limiting the
width of the list to two columns out of three (66.66%). This
aligns the elements correctly while keeping the required top ->
bottom then left -> right behaviour of the links.

Note that the `break-inside: avoid-column` and the padding-top
and padding-bottom tweaks are used to prevent triggering a
possible bug in Safari where focused anchors in a multi-column
layout cause links to jump between columns. As this is not a
long-term robust solution, we should investigate this further
for a possible refactor.

app/assets/stylesheets/views/_homepage.scss

@@ -102,16 +102,45 @@
   padding: 0;
 
   @include govuk-media-query($from: desktop) {
-    @include columns($items: 10, $columns: 2, $selector: "li", $flow: column);
+    width: 66.66%;
+    columns: 2;
+    column-gap: 15px;
   }
+}
 
-  & > li {
-    margin: 0 0 govuk-spacing(4) 0;
-    @include govuk-font($size: 19);
+.homepage-most-active-list__item {
+  margin: 0 0 govuk-spacing(4) 0;
+  @include govuk-font($size: 19);
+  @include govuk-media-query($from: desktop) {
+    break-inside: avoid-column;
+    margin-bottom: 0;
+    padding-top: 0.1875rem;
+    padding-bottom: calc(#{govuk-spacing(2)} - 0.1875rem);
+
+    // After much experimentation, I've used break-inside: avoid-column
+    // and some tweaks to padding-top and padding-bottom on the list
+    // items. This prevents triggering a possible bug in Safari where
+    // focused anchors in a multi-column layout cause links to jump
+    // between columns.
+
+    // Magic numbers in CSS aren't recommended, but the 0.1875rem value
+    // used in the padding is to compensate for the value used in our
+    // global hover states for links, eg: 
+
+    // text-decoration-thickness: max(3px, .1875rem, .12em);
+
+    // This value could be tweaked, and may not be "correct" but when
+    // added to the top padding, it prevents Safari from rendering a
+    // sliver of the focus state in the opposite column.
+
+    // The bottom margin was removed and the spacing instead added as
+    // padding-bottom -- this gives some space within the element for
+    // the focus/hover states to render without being cropped off,
+    // another possible Safari bug.
+
+    // This likely isn't a long-term robust solution and may require
+    // a full refactor in the future.
 
-    @include govuk-media-query($from: desktop) {
-      margin-bottom: govuk-spacing(2);
-    }
   }
 }
 

app/views/homepage/_more_on_govuk.html.erb

@@ -6,28 +6,23 @@
       font_size: "m",
     } %>
   </div>
-
-  <div class="govuk-grid-row">
-    <div class="govuk-grid-column-one-half govuk-grid-column-two-thirds-from-desktop">
-      <ul class="homepage-most-active-list" data-module="gem-track-click">
-        <% t("homepage.index.more_links").each do | item | %>
-          <li>
-            <%= link_to(
-              item[:title],
-              item[:link],
-              class: "govuk-link",
-              data: {
-                "track-category": "homepageClicked",
-                "track-action": "moreLink",
-                "track-label": item[:link],
-                "track-value": "1",
-                "track-dimension": item[:title],
-                "track-dimension-index": "29",
-              }
-            ) %>
-          </li>
-        <% end %>
-      </ul>
-    </div>
-  </div>
+  <ul class="homepage-most-active-list" data-module="gem-track-click">
+    <% t("homepage.index.more_links").each do | item | %>
+      <li class="homepage-most-active-list__item">
+        <%= link_to(
+          item[:title],
+          item[:link],
+          class: "govuk-link",
+          data: {
+            "track-category": "homepageClicked",
+            "track-action": "moreLink",
+            "track-label": item[:link],
+            "track-value": "1",
+            "track-dimension": item[:title],
+            "track-dimension-index": "29",
+          }
+        ) %>
+      </li>
+    <% end %>
+  </ul>
 </section>