Fix group link wrapping in convo details

_locales/en/messages.json

@@ -5659,6 +5659,10 @@
     "messageformat": "Require an admin to approve new members joining via the group link",
     "description": "Description for the require new member admin approval select area"
   },
+  "icu:GroupLinkManagement__CopyGroupLinkButtonLabel": {
+    "messageformat": "Copy signal.group link to keyboard",
+    "description": "GroupLinkManagement > Header > Group link text > Button (looks like normal text) > Accessibility label"
+  },
   "icu:PendingInvites--tab-requests": {
     "messageformat": "Requests ({count, number})",
     "description": "Label for the tab to view pending requests"

stylesheets/components/ConversationDetails.scss

@@ -377,6 +377,13 @@
       color: light-dark(variables.$color-gray-60, variables.$color-gray-25);
     }
 
+    &__info .ConversationDetails__panel-row__group-link {
+      @include mixins.button-reset();
+      & {
+        word-break: break-all;
+      }
+    }
+
     &__right {
       position: relative;
       color: variables.$color-gray-45;

ts/components/conversation/conversation-details/GroupLinkManagement.tsx

@@ -14,6 +14,7 @@ import { Select } from '../../Select';
 import { SignalService as Proto } from '../../../protobuf';
 
 import { copyGroupLink } from '../../../util/copyLinksWithToast';
+import { drop } from '../../../util/drop';
 import { useDelayedRestoreFocus } from '../../../hooks/useRestoreFocus';
 import { useUniqueId } from '../../../hooks/useUniqueId';
 
@@ -67,7 +68,22 @@ export function GroupLinkManagement({
     conversation.groupLink &&
     conversation.accessControlAddFromInviteLink !==
       AccessControlEnum.UNSATISFIABLE;
-  const groupLinkInfo = hasGroupLink ? conversation.groupLink : '';
+
+  let groupLinkInfo: JSX.Element | undefined;
+  if (hasGroupLink) {
+    groupLinkInfo = (
+      <button
+        type="button"
+        className="ConversationDetails__panel-row__group-link"
+        aria-label={i18n('icu:GroupLinkManagement__CopyGroupLinkButtonLabel')}
+        onClick={() => {
+          drop(copyGroupLink(conversation.groupLink ?? ''));
+        }}
+      >
+        {conversation.groupLink}
+      </button>
+    );
+  }
 
   const [hasGenerateNewLinkDialog, setHasGenerateNewLinkDialog] =
     useState(false);
@@ -138,7 +154,7 @@ export function GroupLinkManagement({
               ref={!isAdmin ? focusRef : undefined}
               onClick={() => {
                 if (conversation.groupLink) {
-                  void copyGroupLink(conversation.groupLink);
+                  drop(copyGroupLink(conversation.groupLink));
                 }
               }}
             />

ts/components/conversation/conversation-details/PanelRow.tsx

@@ -11,7 +11,7 @@ export type Props = {
   disabled?: boolean;
   icon?: React.ReactNode;
   label: string | React.ReactNode;
-  info?: string;
+  info?: string | React.ReactNode;
   right?: string | React.ReactNode;
   actions?: React.ReactNode;
   onClick?: () => void;