From 9c44885e6fb3723445dfead5a9297e441cd67fee Mon Sep 17 00:00:00 2001
From: Andy Sellick <andy.sellick@digital.cabinet-office.gov.uk>
Date: Wed, 5 Mar 2025 10:17:44 +0000
Subject: [PATCH] Make attachment thumbnails smaller on mobile

---
 .../components/_attachment.scss                  | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss b/app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss
index 5e3683eba3..c774d7aa66 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss
@@ -18,7 +18,6 @@ $thumbnail-icon-border-colour: govuk-colour("mid-grey");
 .gem-c-attachment__thumbnail {
   position: relative;
   width: auto;
-  margin-right: govuk-spacing(5);
   padding: $thumbnail-border-width;
   float: left;
 }
@@ -26,18 +25,27 @@ $thumbnail-icon-border-colour: govuk-colour("mid-grey");
 .gem-c-attachment__thumbnail-image {
   display: block;
   width: auto; // for IE8
-  max-width: $thumbnail-width;
-  height: $thumbnail-height;
+  max-width: calc($thumbnail-width / 1.5);
+  height: calc($thumbnail-height / 1.5);
   border: $thumbnail-border-colour; // for IE9 & IE10
   outline: $thumbnail-border-width solid $thumbnail-border-colour;
   background: $thumbnail-background;
   box-shadow: $thumbnail-shadow-width $thumbnail-shadow-colour;
   fill: $thumbnail-icon-border-colour;
   stroke: $thumbnail-icon-border-colour;
+
+  @include govuk-media-query($from: tablet) {
+    max-width: $thumbnail-width;
+    height: $thumbnail-height;
+  }
 }
 
 .gem-c-attachment__details {
-  padding-left: $thumbnail-width + $thumbnail-border-width * 2 + govuk-spacing(5);
+  padding-left: calc(($thumbnail-width + $thumbnail-border-width * 2 + govuk-spacing(5)) / 1.5);
+
+  @include govuk-media-query($from: tablet) {
+    padding-left: $thumbnail-width + $thumbnail-border-width * 2 + govuk-spacing(5);
+  }
 
   .gem-c-details {
     margin-top: govuk-spacing(3);