From 5ad8f41123c4d99728ce622849f0a53aa33aea6c Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Tue, 25 Jan 2022 21:20:39 +0000
Subject: [PATCH] Add large link, no hint variant to file-list

At present the file-list pattern assumes each
item has hint text below the link and so increases
the hit area to overlap the hint. This adds a
variant for items without one and uses it on the
page for choosing an alert sub-area.
---
 app/assets/stylesheets/views/dashboard.scss             | 8 ++++++++
 app/templates/views/broadcast/areas-with-sub-areas.html | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/views/dashboard.scss b/app/assets/stylesheets/views/dashboard.scss
index 4e9f9be45..f97c98c39 100644
--- a/app/assets/stylesheets/views/dashboard.scss
+++ b/app/assets/stylesheets/views/dashboard.scss
@@ -68,6 +68,14 @@
     margin-top: -10px;
   }
 
+  &-filename-large-no-hint {
+    padding-bottom: 0;
+    padding-top: 5px;
+    margin-bottom: 0;
+    margin-top: 5px;
+    overflow: visible; // don't cut off thicker underline
+  }
+
   &-filename-unlinked {
     @include core-19;
   }
diff --git a/app/templates/views/broadcast/areas-with-sub-areas.html b/app/templates/views/broadcast/areas-with-sub-areas.html
index 594f15129..463c61555 100644
--- a/app/templates/views/broadcast/areas-with-sub-areas.html
+++ b/app/templates/views/broadcast/areas-with-sub-areas.html
@@ -25,7 +25,7 @@
 
   {% for area in library|sort %}
     <div class="file-list-item">
-      <a class="file-list-filename-large govuk-link govuk-link--no-visited-state" href="{{ url_for('.choose_broadcast_sub_area', service_id=current_service.id, broadcast_message_id=broadcast_message.id, library_slug=library.id, area_slug=area.id) }}">{{ area.name }}</a>
+      <a class="file-list-filename-large file-list-filename-large-no-hint govuk-link govuk-link--no-visited-state" href="{{ url_for('.choose_broadcast_sub_area', service_id=current_service.id, broadcast_message_id=broadcast_message.id, library_slug=library.id, area_slug=area.id) }}">{{ area.name }}</a>
     </div>
   {% endfor %}