fix(front): Truly fix the layout bug when last post is short.

2 files changed, 9 insertions, 2 deletions

diff --git a/Timeline/ClientApp/src/app/timeline/TimelineItem.tsx b/Timeline/ClientApp/src/app/timeline/TimelineItem.tsx
index 79b9a400..43e206f1 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelineItem.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelineItem.tsx
@@ -125,7 +125,7 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
             </div>
           ) : null}
         </Row>
-        <p className="row d-block mb-0 timeline-content clearfix">
+        <div className="row d-block timeline-content">
           <Link
             className="float-right float-sm-left mx-2"
             to={'/users/' + props.post.author.username}
@@ -146,7 +146,7 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
               );
             }
           })()}
-        </p>
+        </div>
       </Col>
       {more != null && more.isOpen ? (
         <>
diff --git a/Timeline/ClientApp/src/app/timeline/TimelinePostEdit.tsx b/Timeline/ClientApp/src/app/timeline/TimelinePostEdit.tsx
index 6501e349..d1c09036 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelinePostEdit.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelinePostEdit.tsx
@@ -110,6 +110,12 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const containerRef = React.useRef<HTMLDivElement>(null!);
 
+  const notifyHeightChange = (): void => {
+    if (props.onHeightChange) {
+      props.onHeightChange(containerRef.current.clientHeight);
+    }
+  };
+
   React.useEffect(() => {
     if (props.onHeightChange) {
       props.onHeightChange(containerRef.current.clientHeight);
@@ -204,6 +210,7 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
                 <>
                   <div className="d-block text-center mt-1 mb-2">
                     <Svg
+                      onLoad={notifyHeightChange}
                       src={kind === 'text' ? imageIcon : textIcon}
                       className="icon-button"
                       onClick={toggleKind}