diff --git a/comebackhere-frontend/src/App.css b/comebackhere-frontend/src/App.css
index 8b0d546..6f58f7a 100644
--- a/comebackhere-frontend/src/App.css
+++ b/comebackhere-frontend/src/App.css
@@ -1607,3 +1607,15 @@ h3 {
justify-content: center;
}
}
+
+/* Keep the copy icon visible on narrow screens: long identifiers wrap
+ instead of pushing the control out of the viewport. */
+.copyable-text {
+ max-width: 100%;
+}
+
+.copyable-text__value {
+ min-width: 0;
+ overflow-wrap: anywhere;
+ word-break: break-all;
+}
diff --git a/comebackhere-frontend/src/components/CopyableText.tsx b/comebackhere-frontend/src/components/CopyableText.tsx
index 1bc8fed..9e15bbb 100644
--- a/comebackhere-frontend/src/components/CopyableText.tsx
+++ b/comebackhere-frontend/src/components/CopyableText.tsx
@@ -38,7 +38,7 @@ export function CopyableText({ text, label, className }: CopyableTextProps) {
aria-label={`${label ?? "Copy"}: ${text}`}
style={{ cursor: "pointer", position: "relative", display: "inline-flex", alignItems: "center", gap: "4px" }}
>
- {text}
+ {text}