From 5bbf9f3d69bc97ca2647d1b17abb2dbd1ddd7731 Mon Sep 17 00:00:00 2001
From: David Goss <david@davidgoss.co>
Date: Tue, 3 Feb 2026 15:49:59 +0000
Subject: [PATCH 1/4] trim error width when possible

---
 src/components/gherkin/ErrorMessage.module.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/gherkin/ErrorMessage.module.scss b/src/components/gherkin/ErrorMessage.module.scss
index 34906af6..a9f3c39e 100644
--- a/src/components/gherkin/ErrorMessage.module.scss
+++ b/src/components/gherkin/ErrorMessage.module.scss
@@ -3,6 +3,7 @@
 .message {
   white-space: pre-wrap;
   font-size: 0.875em;
+  width: fit-content;
   padding: 0.666em 0.75em;
   border-radius: 0.25em;
   margin: 0;

From b796648a0ee3a1e0f6743ca0c1aac92630396621 Mon Sep 17 00:00:00 2001
From: David Goss <david@davidgoss.co>
Date: Wed, 4 Feb 2026 00:58:15 +0000
Subject: [PATCH 2/4] do the same for text attachments

---
 src/components/gherkin/attachment/Attachment.module.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/gherkin/attachment/Attachment.module.scss b/src/components/gherkin/attachment/Attachment.module.scss
index d706c12e..38de6407 100644
--- a/src/components/gherkin/attachment/Attachment.module.scss
+++ b/src/components/gherkin/attachment/Attachment.module.scss
@@ -4,6 +4,7 @@
   position: relative;
   white-space: pre-wrap;
   font-size: 0.875em;
+  width: fit-content;
   padding: 0.666em 0.75em;
   border-radius: 0.25em;
   margin: 0;

From 46c965278de606a57b051139ea8cc4ba5fdd2fc7 Mon Sep 17 00:00:00 2001
From: David Goss <david@davidgoss.co>
Date: Wed, 4 Feb 2026 01:04:01 +0000
Subject: [PATCH 3/4] use ladle dark mode to test theming

---
 .ladle/components.module.scss                 | 17 ++++++++++
 .../customise/CustomRendering.stories.scss    | 17 ----------
 src/components/customise/Themes.stories.tsx   | 33 -------------------
 3 files changed, 17 insertions(+), 50 deletions(-)
 delete mode 100644 src/components/customise/Themes.stories.tsx

diff --git a/.ladle/components.module.scss b/.ladle/components.module.scss
index da413ee2..edd6d3b4 100644
--- a/.ladle/components.module.scss
+++ b/.ladle/components.module.scss
@@ -23,4 +23,21 @@ $defaultMonoFamily: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Libe
   pre, code {
     font-family: $defaultMonoFamily;
   }
+
+  [data-theme="dark"] & {
+    background-color: #1d1d26;
+    color: #c9c9d1;
+    --cucumber-anchor-color: #4caaee;
+    --cucumber-keyword-color: #d89077;
+    --cucumber-parameter-color: #4caaee;
+    --cucumber-tag-color: #85a658;
+    --cucumber-docstring-color: #66a565;
+    --cucumber-error-background-color: #cf6679;
+    --cucumber-error-text-color: #222;
+    --cucumber-code-background-color: #282a36;
+    --cucumber-code-text-color: #f8f8f2;
+    --cucumber-panel-background-color: #282a36;
+    --cucumber-panel-accent-color: #313442;
+    --cucumber-panel-text-color: #f8f8f2;
+  }
 }
\ No newline at end of file
diff --git a/src/components/customise/CustomRendering.stories.scss b/src/components/customise/CustomRendering.stories.scss
index 8ac68559..0c72f1c5 100644
--- a/src/components/customise/CustomRendering.stories.scss
+++ b/src/components/customise/CustomRendering.stories.scss
@@ -6,20 +6,3 @@
   text-shadow: 1px 1px 2px white;
   padding: 10px;
 }
-
-.dark-theme {
-  background-color: #1d1d26;
-  color: #c9c9d1;
-  --cucumber-anchor-color: #4caaee;
-  --cucumber-keyword-color: #d89077;
-  --cucumber-parameter-color: #4caaee;
-  --cucumber-tag-color: #85a658;
-  --cucumber-docstring-color: #66a565;
-  --cucumber-error-background-color: #cf6679;
-  --cucumber-error-text-color: #222;
-  --cucumber-code-background-color: #282a36;
-  --cucumber-code-text-color: #f8f8f2;
-  --cucumber-panel-background-color: #282a36;
-  --cucumber-panel-accent-color: #313442;
-  --cucumber-panel-text-color: #f8f8f2;
-}
diff --git a/src/components/customise/Themes.stories.tsx b/src/components/customise/Themes.stories.tsx
deleted file mode 100644
index f36c02cd..00000000
--- a/src/components/customise/Themes.stories.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import './CustomRendering.stories.scss'
-
-import * as messages from '@cucumber/messages'
-import { Story } from '@ladle/react'
-import React from 'react'
-
-import attachments from '../../../acceptance/attachments/attachments.js'
-import { EnvelopesProvider, FilteredDocuments } from '../app/index.js'
-
-export default {
-  title: 'Customisation/Themes',
-}
-
-export const Themes: Story<{ envelopes: readonly messages.Envelope[]; theme: string }> = ({
-  envelopes,
-  theme,
-}) => {
-  return (
-    <>
-      <h2>{theme} Theme</h2>
-      <div className={`${theme}-theme`}>
-        <EnvelopesProvider envelopes={envelopes}>
-          <FilteredDocuments />
-        </EnvelopesProvider>
-      </div>
-    </>
-  )
-}
-
-Themes.args = {
-  envelopes: attachments,
-  theme: 'dark',
-}

From bfe972b2b48ce8ece9553b73b5a1a8a4d95079a3 Mon Sep 17 00:00:00 2001
From: David Goss <david@davidgoss.co>
Date: Wed, 4 Feb 2026 01:07:01 +0000
Subject: [PATCH 4/4] Update CHANGELOG.md

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 97f94fd9..fa8b82d1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
+### Fixed
+- Stop errors and attachments getting too wide ([#427](https://github.com/cucumber/react-components/pull/427))
 
 ## [24.2.0] - 2026-01-31
 ### Changed