diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index d2febab31..7e4188958 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -1078,8 +1078,8 @@ label {
   }
 }
 .user-details-dialog {
-  .message {
-    user-select: all;
+  .session-id-editable {
+    width: 30vh;
   }
 }
 
diff --git a/ts/components/UserDetailsDialog.tsx b/ts/components/UserDetailsDialog.tsx
index 7a1ea4856..0b2cabfdf 100644
--- a/ts/components/UserDetailsDialog.tsx
+++ b/ts/components/UserDetailsDialog.tsx
@@ -7,6 +7,7 @@ import {
   SessionButtonColor,
   SessionButtonType,
 } from './session/SessionButton';
+import { SessionIdEditable } from './session/SessionIdEditable';
 
 interface Props {
   i18n: any;
@@ -41,7 +42,7 @@ export class UserDetailsDialog extends React.Component<Props> {
         <div className="avatar-center">
           <div className="avatar-center-inner">{this.renderAvatar()}</div>
         </div>
-        <div className="message">{this.props.pubkey}</div>
+        <SessionIdEditable editable={false} text={this.props.pubkey} />
 
         <div className="session-modal__button-group__center">
           {!isRss && (
diff --git a/ts/components/session/SessionIdEditable.tsx b/ts/components/session/SessionIdEditable.tsx
index ee6a17930..06c246e17 100644
--- a/ts/components/session/SessionIdEditable.tsx
+++ b/ts/components/session/SessionIdEditable.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 interface Props {
-  placeholder: string;
+  placeholder?: string;
   text?: string;
   editable?: boolean;
   onChange?: any;