feat: Enhance design.

2 files changed, 15 insertions, 7 deletions

diff --git a/FrontEnd/src/app/views/timeline-common/Timeline.tsx b/FrontEnd/src/app/views/timeline-common/Timeline.tsx
index 6bd1b96d..9047919c 100644
--- a/FrontEnd/src/app/views/timeline-common/Timeline.tsx
+++ b/FrontEnd/src/app/views/timeline-common/Timeline.tsx
@@ -14,6 +14,7 @@ export type TimelineDeleteCallback = (index: number, id: number) => void;
 
 export interface TimelineProps {
   className?: string;
+  style?: React.CSSProperties;
   posts: TimelinePostInfoEx[];
   onDelete: TimelineDeleteCallback;
   onResize?: () => void;
@@ -52,7 +53,11 @@ const Timeline: React.FC<TimelineProps> = (props) => {
   }, [posts, onDelete]);
 
   return (
-    <div ref={props.containerRef} className={clsx("timeline", props.className)}>
+    <div
+      ref={props.containerRef}
+      style={props.style}
+      className={clsx("timeline", props.className)}
+    >
       <TimelineTop height="56px" />
       {(() => {
         const length = posts.length;
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}