From cb5ebfc2958d6de7bce0c5a29c472232fef29a5c Mon Sep 17 00:00:00 2001
From: James Cocker <james.s.earth@gmail.com>
Date: Tue, 12 May 2026 11:43:01 +0100
Subject: [PATCH 1/2] Fix code alignment

Signed-off-by: James Cocker <james.s.earth@gmail.com>
---
 .../components/tokens/TokenResponseModal.tsx  | 14 +++++---
 .../tokens/TokenResponseModal.module.css      | 32 +++++++++++++++++++
 2 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100644 galasa-ui/src/styles/tokens/TokenResponseModal.module.css

diff --git a/galasa-ui/src/components/tokens/TokenResponseModal.tsx b/galasa-ui/src/components/tokens/TokenResponseModal.tsx
index 29c676ab..1200cdaa 100644
--- a/galasa-ui/src/components/tokens/TokenResponseModal.tsx
+++ b/galasa-ui/src/components/tokens/TokenResponseModal.tsx
@@ -7,6 +7,7 @@ import { InlineNotification } from '@carbon/react';
 import { Modal, CodeSnippet } from '@carbon/react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
+import styles from '@/styles/tokens/TokenResponseModal.module.css';
 
 interface TokenResponseModalProps {
   refreshToken: string;
@@ -48,20 +49,23 @@ export default function TokenResponseModal({
         setOpen(false);
       }}
     >
-      <p>{translations('description1')}</p>
-      <CodeSnippet type="multi" wrapText>{`GALASA_TOKEN=${token}:${clientIdState}`}</CodeSnippet>
+      <p id={styles.description}>{translations('description1')}</p>
+      <CodeSnippet className={styles.codeSnippet} type="multi" wrapText>
+        {`GALASA_TOKEN=${token}:${clientIdState}`}
+      </CodeSnippet>
       <InlineNotification
+        className={styles.notification}
         title={translations('warningTitle')}
         subtitle={translations('warningSubtitle')}
         kind="warning"
         lowContrast
         hideCloseButton
       />
-      <p className="margin-top-1">{translations('description2')}</p>
-      <CodeSnippet className="margin-y-1" type="multi" align="right">
+      <p id={styles.commandDescription}>{translations('description2')}</p>
+      <CodeSnippet className={styles.commandExample} type="multi" align="right">
         {translations('commandExample')}
       </CodeSnippet>
-      <p>
+      <p className={styles.docsLink}>
         {translations('seeDocsIntro')}{' '}
         <a
           href="https://galasa.dev/docs/initialising-home-folder"
diff --git a/galasa-ui/src/styles/tokens/TokenResponseModal.module.css b/galasa-ui/src/styles/tokens/TokenResponseModal.module.css
new file mode 100644
index 00000000..c59207d6
--- /dev/null
+++ b/galasa-ui/src/styles/tokens/TokenResponseModal.module.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright contributors to the Galasa project
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+#description {
+  padding-right: 0px;
+  margin-bottom: 0.5rem;
+}
+
+.codeSnippet {
+  margin-bottom: 0.5rem;
+}
+
+.notification {
+  margin-bottom: 0.5rem;
+}
+
+#commandDescription {
+  padding-right: 0px;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.commandExample {
+  margin-bottom: 0.5rem;
+}
+
+.docsLink {
+  margin-top: 0.5rem;
+}

From 8466ee69e79dec9a8d04186e4928c651defa9b3c Mon Sep 17 00:00:00 2001
From: James Cocker <james.s.earth@gmail.com>
Date: Tue, 12 May 2026 16:08:19 +0100
Subject: [PATCH 2/2] Max width for modal

Signed-off-by: James Cocker <james.s.earth@gmail.com>
---
 galasa-ui/src/components/tokens/TokenResponseModal.tsx    | 4 +---
 galasa-ui/src/styles/tokens/TokenResponseModal.module.css | 7 ++++++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/galasa-ui/src/components/tokens/TokenResponseModal.tsx b/galasa-ui/src/components/tokens/TokenResponseModal.tsx
index 1200cdaa..57859b2a 100644
--- a/galasa-ui/src/components/tokens/TokenResponseModal.tsx
+++ b/galasa-ui/src/components/tokens/TokenResponseModal.tsx
@@ -38,9 +38,7 @@ export default function TokenResponseModal({
 
   return (
     <Modal
-      size="lg"
-      className="padding-x-13"
-      id="token-passiveModal"
+      className={styles.modal}
       open={isOpen}
       passiveModal
       modalHeading={translations('modalHeading')}
diff --git a/galasa-ui/src/styles/tokens/TokenResponseModal.module.css b/galasa-ui/src/styles/tokens/TokenResponseModal.module.css
index c59207d6..3840f4ce 100644
--- a/galasa-ui/src/styles/tokens/TokenResponseModal.module.css
+++ b/galasa-ui/src/styles/tokens/TokenResponseModal.module.css
@@ -4,6 +4,11 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 
+/* Uses :global() to access Carbon's global class */
+.modal :global(.cds--modal-container) {
+  max-width: 800px;
+}
+
 #description {
   padding-right: 0px;
   margin-bottom: 0.5rem;
@@ -29,4 +34,4 @@
 
 .docsLink {
   margin-top: 0.5rem;
-}
+}
\ No newline at end of file