UI fixes for conversation details screen

ts/components/conversation/ConversationHeader.tsx

@@ -487,13 +487,15 @@ export class ConversationHeader extends React.Component<PropsType> {
   private renderHeader(): JSX.Element {
     const {
       conversationTitle,
+      groupVersion,
       id,
       isMe,
       onShowContactModal,
+      onShowConversationDetails,
       type,
     } = this.props;
 
-    if (conversationTitle) {
+    if (conversationTitle !== undefined) {
       return (
         <div className="module-conversation-header__title-flex">
           <div className="module-conversation-header__title">
@@ -503,6 +505,35 @@ export class ConversationHeader extends React.Component<PropsType> {
       );
     }
 
+    const hasGV2AdminEnabled =
+      groupVersion === 2 &&
+      window.Signal.RemoteConfig.isEnabled('desktop.gv2Admin');
+
+    if (type === 'group' && hasGV2AdminEnabled) {
+      const onHeaderClick = () => onShowConversationDetails();
+      const onKeyDown = (e: React.KeyboardEvent): void => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.stopPropagation();
+          e.preventDefault();
+
+          onShowConversationDetails();
+        }
+      };
+
+      return (
+        <div
+          className="module-conversation-header__title-flex module-conversation-header__title-clickable"
+          onClick={onHeaderClick}
+          onKeyDown={onKeyDown}
+          role="button"
+          tabIndex={0}
+        >
+          {this.renderAvatar()}
+          {this.renderTitle()}
+        </div>
+      );
+    }
+
     if (type === 'group' || isMe) {
       return (
         <div className="module-conversation-header__title-flex">