feat: Enhance design.

4 files changed, 17 insertions, 12 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}
diff --git a/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx b/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx
index abc3d0c9..1070c6d7 100644
--- a/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx
+++ b/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx
@@ -36,7 +36,7 @@ const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => {
       collapse={collapse}
       toggleCollapse={toggleCollapse}
     >
-      <h3 className="text-primary mx-3 d-inline-block align-middle">
+      <h3 className="text-primary d-inline-block align-middle">
         {timeline.title}
         <small className="ml-3 text-secondary">{timeline.name}</small>
       </h3>
diff --git a/FrontEnd/src/app/views/user/UserInfoCard.tsx b/FrontEnd/src/app/views/user/UserInfoCard.tsx
index e4edd80d..4a0c9e87 100644
--- a/FrontEnd/src/app/views/user/UserInfoCard.tsx
+++ b/FrontEnd/src/app/views/user/UserInfoCard.tsx
@@ -35,16 +35,13 @@ const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
       collapse={collapse}
       toggleCollapse={toggleCollapse}
     >
-      <h3 className="text-primary mx-3 d-inline-block align-middle">
+      <h3 className="text-primary d-inline-block align-middle">
         {timeline.title}
         <small className="ml-3 text-secondary">{timeline.name}</small>
       </h3>
       <div className="align-middle">
         <BlobImage blob={avatar} className="avatar small rounded-circle mr-3" />
         {timeline.owner.nickname}
-        <small className="ml-3 text-secondary">
-          @{timeline.owner.username}
-        </small>
       </div>
       <p className="mb-0">{timeline.description}</p>
       <small className="mt-1 d-block">