From 949e94f49fbc727725a5837320178ec4590606c1 Mon Sep 17 00:00:00 2001
From: Tim Cowlishaw <tim@timcowlishaw.co.uk>
Date: Fri, 23 Sep 2022 17:00:10 +0200
Subject: [PATCH] Rethink judgment paragraph numbering layout on small
 breakpoint

A slightly 'creative' solution in code terms, but I think design-wise it makes sense (credit for which goes to Jim).

At the smallest breakpoint, hanging section numbers take up too much screen real estate making the judgement hard to read. Instead, we indent the first line of the para after the number, making the para numbers easily recognisable while not losing  whole length of the line for text.
---
 .../sass/includes/_judgment_text.scss         | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/ds_judgements_public_ui/sass/includes/_judgment_text.scss b/ds_judgements_public_ui/sass/includes/_judgment_text.scss
index ca32a3ba7..57523aa13 100644
--- a/ds_judgements_public_ui/sass/includes/_judgment_text.scss
+++ b/ds_judgements_public_ui/sass/includes/_judgment_text.scss
@@ -201,6 +201,10 @@
   }
 
   &__number {
+    @media (max-width: $grid__breakpoint-medium) {
+      padding-right: $spacer__unit;
+    }
+
     &:target {
       animation-duration: 1.5s;
       animation-name: emphasis-border;
@@ -213,20 +217,64 @@
   }
 
   &__section {
+
+    @media (max-width: $grid__breakpoint-medium) {
+      > div {
+        display: inline;
+        &::after {
+          content: " ";
+          display: block;
+        }
+        p {
+          display: inline;
+          &::after {
+            content: " ";
+            display: block;
+            margin-bottom: $spacer__unit;
+          }
+        }
+      }
+    }
+
+    @media (min-width: $grid__breakpoint-medium) {
       display: grid;
       grid-template-columns: 1fr 15fr;
       grid-template-rows: 1fr;
       gap: 0 $spacer__unit * 0.5;
       grid-template-areas: ". .";
+    }
   }
 
 
   &__nested-section {
+
+    @media (max-width: $grid__breakpoint-medium) {
+      margin-left: $spacer__unit;
+
+      > div {
+        display: inline;
+        &::after {
+          content: " ";
+          display: block;
+        }
+        p {
+          display: inline;
+          &::after {
+            content: " ";
+            display: block;
+            margin-bottom: $spacer__unit;
+          }
+        }
+      }
+    }
+
+    @media (min-width: $grid__breakpoint-medium) {
       display: grid;
       grid-template-columns: 1fr 24fr;
       grid-template-rows: 1fr;
       gap: 0 $spacer__unit * 0.5;
       grid-template-areas: ". .";
+    }
   }
 
   &__indent {