From e31c499492cc70b5aa17147f5ebe58c0b97a4326 Mon Sep 17 00:00:00 2001
From: David Christiandy <1299411+dvdchr@users.noreply.github.com>
Date: Fri, 12 Nov 2021 17:34:20 +0700
Subject: [PATCH] Fix component spacing for comment content cell

---
 .../Comments/CommentContentTableViewCell.swift     | 14 ++++++++++++++
 .../Comments/CommentContentTableViewCell.xib       |  8 +++++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
index 7954e3c72c84..65709fd82228 100644
--- a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
+++ b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
@@ -28,8 +28,15 @@ class CommentContentTableViewCell: UITableViewCell, NibReusable {
         }
     }
 
+    // MARK: Constants
+
+    private let customBottomSpacing: CGFloat = 10
+
     // MARK: Outlets
 
+    @IBOutlet private weak var containerStackView: UIStackView!
+    @IBOutlet private weak var containerStackBottomConstraint: NSLayoutConstraint!
+
     @IBOutlet private weak var avatarImageView: CircularImageView!
     @IBOutlet private weak var nameLabel: UILabel!
     @IBOutlet private weak var dateLabel: UILabel!
@@ -144,6 +151,13 @@ class CommentContentTableViewCell: UITableViewCell, NibReusable {
         isAccessoryButtonEnabled = comment.isApproved()
         isModerationEnabled = comment.allowsModeration()
 
+        // When reaction bar is hidden, add some space between the webview and the moderation bar.
+        containerStackView.setCustomSpacing(isReactionEnabled ? 0 : customBottomSpacing, after: webView)
+
+        // When both reaction bar and moderation bar is hidden, the custom spacing for the webview won't be applied since it's at the bottom of the stack view.
+        // The reaction bar and the moderation bar have their own spacing, unlike the webview. Therefore, additional bottom spacing is needed.
+        containerStackBottomConstraint.constant = (isReactionEnabled || isModerationEnabled) ? 0 : customBottomSpacing
+
         if isModerationEnabled {
             moderationBar.commentStatus = CommentStatusType.typeForStatus(comment.status)
         }
diff --git a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.xib b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.xib
index dc0c71ccf858..abd8dff0e832 100644
--- a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.xib
+++ b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.xib
@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="19162" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="19455" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
     <device id="retina6_1" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="19144"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="19454"/>
         <capability name="Image references" minToolsVersion="12.0"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
         <capability name="System colors in document resources" minToolsVersion="11.0"/>
@@ -106,7 +106,7 @@
                                         </state>
                                     </button>
                                     <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="X2J-8b-R5F" userLabel="Like Button">
-                                        <rect key="frame" x="60" y="0.0" width="82.5" height="0.0"/>
+                                        <rect key="frame" x="60" y="0.0" width="78.5" height="0.0"/>
                                         <fontDescription key="fontDescription" style="UICTFontTextStyleSubhead"/>
                                         <color key="tintColor" systemColor="secondaryLabelColor"/>
                                         <inset key="contentEdgeInsets" minX="5" minY="10" maxX="35" maxY="15"/>
@@ -153,6 +153,8 @@
             <connections>
                 <outlet property="accessoryButton" destination="1G8-cc-t5d" id="kLS-Ag-hAG"/>
                 <outlet property="avatarImageView" destination="9QY-3I-cxv" id="lbp-Hv-zRm"/>
+                <outlet property="containerStackBottomConstraint" destination="jAu-U3-I4N" id="1Hk-Cp-fR5"/>
+                <outlet property="containerStackView" destination="hcN-S7-sLG" id="k9D-6a-BmR"/>
                 <outlet property="dateLabel" destination="ghT-Xy-q8c" id="ffa-qV-3tn"/>
                 <outlet property="likeButton" destination="X2J-8b-R5F" id="6w2-io-GXb"/>
                 <outlet property="moderationBar" destination="T1Z-LV-01Y" id="YUL-ft-QkO"/>