From d39ef234e023adc98e8c50fda06ea01cfb05ce36 Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Mon, 24 Apr 2023 16:18:00 -0400
Subject: [PATCH] Do not nest buttons in the conversation header

---
 .../ConversationDetailsHeader.tsx             | 34 +++++++++++--------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx b/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx
index 6a44cf602e..1b63701a21 100644
--- a/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx
+++ b/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx
@@ -54,6 +54,7 @@ export function ConversationDetailsHeader({
 
   let preferredBadge: undefined | BadgeType;
   let subtitle: ReactNode;
+  let hasNestedButton = false;
   if (isGroup) {
     if (conversation.groupDescription) {
       subtitle = (
@@ -63,6 +64,7 @@ export function ConversationDetailsHeader({
           title={conversation.title}
         />
       );
+      hasNestedButton = true;
     } else if (canEdit) {
       subtitle = i18n('icu:ConversationDetailsHeader--add-group-description');
     } else {
@@ -163,21 +165,25 @@ export function ConversationDetailsHeader({
         >
           {contents}
         </button>
-        <button
-          type="button"
-          onClick={ev => {
-            if (ev.target instanceof HTMLAnchorElement) {
-              return;
-            }
-
-            ev.preventDefault();
-            ev.stopPropagation();
-            startEditing(false);
-          }}
-          className={bem('root', 'editable')}
-        >
+        {hasNestedButton ? (
           <div className={bem('subtitle')}>{subtitle}</div>
-        </button>
+        ) : (
+          <button
+            type="button"
+            onClick={ev => {
+              if (ev.target instanceof HTMLAnchorElement) {
+                return;
+              }
+
+              ev.preventDefault();
+              ev.stopPropagation();
+              startEditing(false);
+            }}
+            className={bem('root', 'editable')}
+          >
+            <div className={bem('subtitle')}>{subtitle}</div>
+          </button>
+        )}
       </div>
     );
   }