feat: Enhance design.

1 files changed, 9 insertions, 6 deletions

diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
index 35c1a65d..036577b1 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
@@ -47,13 +47,10 @@ export default function TimelinePageTemplateUI<TManageItems>(
 
   const { t } = useTranslation();
 
-  const bottomSpaceRef = React.useRef<HTMLDivElement | null>(null);
+  const [bottomSpaceHeight, setBottomSpaceHeight] = React.useState<number>(0);
 
   const onPostEditHeightChange = React.useCallback((height: number): void => {
-    const { current: bottomSpaceDiv } = bottomSpaceRef;
-    if (bottomSpaceDiv != null) {
-      bottomSpaceDiv.style.height = `${height}px`;
-    }
+    setBottomSpaceHeight(height);
     if (height === 0) {
       const alertHost = getAlertHost();
       if (alertHost != null) {
@@ -177,6 +174,9 @@ export default function TimelinePageTemplateUI<TManageItems>(
 
           timelineBody = (
             <Timeline
+              style={{
+                minHeight: `calc(100vh - 56px - ${bottomSpaceHeight}px)`,
+              }}
               containerRef={timelineRef}
               posts={posts}
               onDelete={props.onDelete}
@@ -187,7 +187,10 @@ export default function TimelinePageTemplateUI<TManageItems>(
             timelineBody = (
               <>
                 {timelineBody}
-                <div ref={bottomSpaceRef} className="flex-fix-length" />
+                <div
+                  style={{ height: bottomSpaceHeight }}
+                  className="flex-fix-length"
+                />
                 <TimelinePostEdit
                   className="fixed-bottom"
                   onPost={props.onPost}