From 997375a927fd9525f1991cf15d56cc7bbc6a3da1 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 27 Sep 2021 15:03:20 -0500
Subject: [PATCH] DetailedStatus: fix rounded corners

---
 app/soapbox/features/status/index.js       | 12 ++++++++----
 app/styles/components/detailed-status.scss | 13 +++++--------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/app/soapbox/features/status/index.js b/app/soapbox/features/status/index.js
index b826a1281..af17aa7ed 100644
--- a/app/soapbox/features/status/index.js
+++ b/app/soapbox/features/status/index.js
@@ -548,11 +548,11 @@ class Status extends ImmutablePureComponent {
     }
 
     if (ancestorsIds && ancestorsIds.size > 0) {
-      ancestors = <div>{this.renderChildren(ancestorsIds)}</div>;
+      ancestors = this.renderChildren(ancestorsIds);
     }
 
     if (descendantsIds && descendantsIds.size > 0) {
-      descendants = <div>{this.renderChildren(descendantsIds)}</div>;
+      descendants = this.renderChildren(descendantsIds);
     }
 
     const handlers = {
@@ -596,7 +596,9 @@ class Status extends ImmutablePureComponent {
         */}
 
         <div ref={this.setRef} className='detailed-status-container'>
-          {ancestors}
+          {ancestors && (
+            <div className='detailed-status__ancestors'>{ancestors}</div>
+          )}
 
           <HotKeys handlers={handlers}>
             <div ref={this.setStatusRef} className={classNames('focusable', 'detailed-status__wrapper')} tabIndex='0' aria-label={textForScreenReader(intl, status, false)}>
@@ -638,7 +640,9 @@ class Status extends ImmutablePureComponent {
             </div>
           </HotKeys>
 
-          {descendants}
+          {descendants && (
+            <div className='detailed-status__descendants'>{descendants}</div>
+          )}
         </div>
       </Column>
     );
diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss
index f139a512b..bd0ae82a3 100644
--- a/app/styles/components/detailed-status.scss
+++ b/app/styles/components/detailed-status.scss
@@ -160,12 +160,9 @@
   margin-right: 5px;
 }
 
-.detailed-status-container {
-  > div:first-child {
-    .status-container .status__wrapper,
-    .detailed-status__wrapper {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
-  }
+/* Connect the first status to the SubNavigation */
+.detailed-status__ancestors .status-container:first-child .status__wrapper,
+.detailed-status-container > div:first-child .detailed-status__wrapper {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }