add style block to add gutters to composer trail image thumbnail (ext…

…racted/moved from guardian/flexible-content#4984 for neater separation of concerns) when we're offering the `SuggestAlternateCrops` component beneath

client/src/fronts/suggestAlternateCrops.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 import { ButtonInOtherTools } from "../buttonInOtherTools";
-import { css } from "@emotion/react";
+import { css, Global } from "@emotion/react";
 import {
   PayloadWithThumbnail,
   StaticGridPayload,
@@ -14,6 +14,7 @@ import { gqlCreateItem } from "../../gql";
 import { isPinboardData, PinboardData } from "shared/graphql/extraTypes";
 import { agateSans } from "../../fontNormaliser";
 import { pinMetal } from "../../colours";
+import { neutral } from "@guardian/source-foundations";
 
 export const SUGGEST_ALTERNATE_CROP_QUERY_SELECTOR =
   "pinboard-suggest-alternate-crops";
@@ -27,6 +28,33 @@ const gridTopLevelDomain = window.location.hostname.endsWith(".gutools.co.uk")
   ? "gutools.co.uk"
   : "test.dev-gutools.co.uk";
 
+const cssToAddGuttersToComposerTrailThumbnail = css`
+  #js-change-trail-image-button {
+    position: relative;
+  }
+  #js-change-trail-image-button::before,
+  #js-change-trail-image-button::after {
+    display: block;
+    content: "";
+    position: absolute;
+    z-index: 999;
+    width: 12.5%;
+    top: 0;
+    bottom: 0;
+    opacity: 0.75;
+  }
+  #js-change-trail-image-button::before {
+    /* left gutter */
+    left: 0;
+    background: ${neutral[93]};
+  }
+  #js-change-trail-image-button::after {
+    /* right gutter */
+    right: 0;
+    background: ${neutral[93]};
+  }
+`;
+
 interface GridCropDataFromPostMessage {
   id: string;
   specification: {
@@ -161,6 +189,9 @@ export const SuggestAlternateCrops = ({
 
   return (
     <>
+      {alternateCropSuggestionElements.length > 0 && (
+        <Global styles={cssToAddGuttersToComposerTrailThumbnail} />
+      )}
       {alternateCropSuggestionElements.map((htmlElement) =>
         ReactDOM.createPortal(
           <root.div