Make sync state badge fixed.

2 files changed, 16 insertions, 7 deletions

diff --git a/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx
index 0d8ad278..dc5bfda8 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx
@@ -1,8 +1,9 @@
-import React from 'react';

+import React, { CSSProperties } from 'react';

 import { Spinner } from 'reactstrap';

 import { useTranslation } from 'react-i18next';

 import { fromEvent } from 'rxjs';

 import Svg from 'react-inlinesvg';

+import clsx from 'clsx';

 

 import arrowsAngleContractIcon from 'bootstrap-icons/icons/arrows-angle-contract.svg';

 import arrowsAngleExpandIcon from 'bootstrap-icons/icons/arrows-angle-expand.svg';

@@ -25,11 +26,13 @@ import TimelinePostEdit, { TimelinePostSendCallback } from './TimelinePostEdit';
 

 const TimelinePostSyncStateBadge: React.FC<{

   state: 'syncing' | 'synced' | 'offline';

-}> = ({ state }) => {

+  style?: CSSProperties;

+  className?: string;

+}> = ({ state, style, className }) => {

   const { t } = useTranslation();

 

   return (

-    <div className="timeline-sync-state-badge">

+    <div style={style} className={clsx('timeline-sync-state-badge', className)}>

       {(() => {

         switch (state) {

           case 'syncing': {

@@ -211,9 +214,16 @@ export default function TimelinePageTemplateUI<TManageItems>(
             })

           );

 

+          const topHeight: string = infoCardCollapse

+            ? 'calc(68px + 1.5em)'

+            : `${cardHeight + 60}px`;

+

           timelineBody = (

-            <div className="position-relative">

-              <TimelinePostSyncStateBadge state={postListState.state} />

+            <div>

+              <TimelinePostSyncStateBadge

+                style={{ top: topHeight }}

+                state={postListState.state}

+              />

               <Timeline

                 containerRef={timelineRef}

                 posts={posts}

diff --git a/Timeline/ClientApp/src/app/timeline/timeline-ui.sass b/Timeline/ClientApp/src/app/timeline/timeline-ui.sass
index 952e4659..667c1da9 100644
--- a/Timeline/ClientApp/src/app/timeline/timeline-ui.sass
+++ b/Timeline/ClientApp/src/app/timeline/timeline-ui.sass
@@ -17,12 +17,11 @@
   transition: height 0.5s

 

 .timeline-sync-state-badge

-  position: absolute

+  position: fixed

   top: 0

   right: 0

   z-index: 1

   font-size: 0.8em

-  margin-top: 4px

   padding: 3px 8px

   border-radius: 5px

   background: #e8fbff