DetailedStatus: remove gaps, rename .detailed-status-container to .thread

app/soapbox/features/status/index.js

@@ -595,53 +595,55 @@ class Status extends ImmutablePureComponent {
           />
         */}
 
-        <div ref={this.setRef} className='detailed-status-container'>
+        <div ref={this.setRef} className='thread'>
           {ancestors && (
-            <div className='detailed-status__ancestors'>{ancestors}</div>
+            <div className='thread__ancestors'>{ancestors}</div>
           )}
 
-          <HotKeys handlers={handlers}>
-            <div ref={this.setStatusRef} className={classNames('focusable', 'detailed-status__wrapper')} tabIndex='0' aria-label={textForScreenReader(intl, status, false)}>
-              <DetailedStatus
-                status={status}
-                onOpenVideo={this.handleOpenVideo}
-                onOpenMedia={this.handleOpenMedia}
-                onToggleHidden={this.handleToggleHidden}
-                domain={domain}
-                showMedia={this.state.showMedia}
-                onToggleMediaVisibility={this.handleToggleMediaVisibility}
-              />
+          <div className='thread__status'>
+            <HotKeys handlers={handlers}>
+              <div ref={this.setStatusRef} className={classNames('focusable', 'detailed-status__wrapper')} tabIndex='0' aria-label={textForScreenReader(intl, status, false)}>
+                <DetailedStatus
+                  status={status}
+                  onOpenVideo={this.handleOpenVideo}
+                  onOpenMedia={this.handleOpenMedia}
+                  onToggleHidden={this.handleToggleHidden}
+                  domain={domain}
+                  showMedia={this.state.showMedia}
+                  onToggleMediaVisibility={this.handleToggleMediaVisibility}
+                />
 
-              <ActionBar
-                status={status}
-                onReply={this.handleReplyClick}
-                onFavourite={this.handleFavouriteClick}
-                onEmojiReact={this.handleEmojiReactClick}
-                onReblog={this.handleReblogClick}
-                onDelete={this.handleDeleteClick}
-                onDirect={this.handleDirectClick}
-                onMention={this.handleMentionClick}
-                onMute={this.handleMuteClick}
-                onMuteConversation={this.handleConversationMuteClick}
-                onBlock={this.handleBlockClick}
-                onReport={this.handleReport}
-                onPin={this.handlePin}
-                onBookmark={this.handleBookmark}
-                onEmbed={this.handleEmbed}
-                onDeactivateUser={this.handleDeactivateUser}
-                onDeleteUser={this.handleDeleteUser}
-                onToggleStatusSensitivity={this.handleToggleStatusSensitivity}
-                onDeleteStatus={this.handleDeleteStatus}
-                allowedEmoji={this.props.allowedEmoji}
-                emojiSelectorFocused={this.state.emojiSelectorFocused}
-                handleEmojiSelectorExpand={this.handleEmojiSelectorExpand}
-                handleEmojiSelectorUnfocus={this.handleEmojiSelectorUnfocus}
-              />
-            </div>
-          </HotKeys>
+                <ActionBar
+                  status={status}
+                  onReply={this.handleReplyClick}
+                  onFavourite={this.handleFavouriteClick}
+                  onEmojiReact={this.handleEmojiReactClick}
+                  onReblog={this.handleReblogClick}
+                  onDelete={this.handleDeleteClick}
+                  onDirect={this.handleDirectClick}
+                  onMention={this.handleMentionClick}
+                  onMute={this.handleMuteClick}
+                  onMuteConversation={this.handleConversationMuteClick}
+                  onBlock={this.handleBlockClick}
+                  onReport={this.handleReport}
+                  onPin={this.handlePin}
+                  onBookmark={this.handleBookmark}
+                  onEmbed={this.handleEmbed}
+                  onDeactivateUser={this.handleDeactivateUser}
+                  onDeleteUser={this.handleDeleteUser}
+                  onToggleStatusSensitivity={this.handleToggleStatusSensitivity}
+                  onDeleteStatus={this.handleDeleteStatus}
+                  allowedEmoji={this.props.allowedEmoji}
+                  emojiSelectorFocused={this.state.emojiSelectorFocused}
+                  handleEmojiSelectorExpand={this.handleEmojiSelectorExpand}
+                  handleEmojiSelectorUnfocus={this.handleEmojiSelectorUnfocus}
+                />
+              </div>
+            </HotKeys>
+          </div>
 
           {descendants && (
-            <div className='detailed-status__descendants'>{descendants}</div>
+            <div className='thread__descendants'>{descendants}</div>
           )}
         </div>
       </Column>

app/styles/components/detailed-status.scss

@@ -160,9 +160,18 @@
   margin-right: 5px;
 }
 
-/* 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;
+.thread {
+  // Don't display gaps between statuses in a thread
+  .status-container {
+    padding: 0;
+  }
+
+  .status__wrapper {
+    border-radius: 0;
+  }
+
+  .detailed-status__wrapper {
+    border-radius: 0;
+    margin: 0;
+  }
 }