...

3 files changed, 32 insertions, 22 deletions

diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx
index 09d74d3c..2b6dcd0a 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelineItem.tsx
@@ -145,7 +145,7 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
           >
             <Svg
               src={trashIcon}
-              className="text-danger large-icon-button"
+              className="text-danger icon-button large"
               onClick={(e: Event) => {
                 toggleDeleteDialog();
                 e.stopPropagation();
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
index c2d4aeaa..58fd024b 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
@@ -18,6 +18,7 @@ import Timeline, {
 } from "./Timeline";
 import TimelinePostEdit, { TimelinePostSendCallback } from "./TimelinePostEdit";
 import { TimelineSyncStatus } from "./SyncStatusBadge";
+import clsx from "clsx";
 
 export interface TimelineCardComponentProps<TManageItems> {
   timeline: TimelineInfo;
@@ -206,24 +207,30 @@ export default function TimelinePageTemplateUI<TManageItems>(
 
       body = (
         <>
-          <CardComponent
-            timeline={timeline}
-            onManage={props.onManage}
-            onMember={props.onMember}
-            className="timeline-info-card"
-            syncStatus={syncStatus}
-            collapse={infoCardCollapse}
-            toggleCollapse={() => {
-              const newState = !infoCardCollapse;
-              setInfoCardCollapse(newState);
-              if (timeline != null) {
-                window.localStorage.setItem(
-                  genCardCollapseLocalStorageKey(timeline.uniqueId),
-                  newState.toString()
-                );
-              }
-            }}
-          />
+          <div
+            className={clsx(
+              "timeline-template-info-card",
+              infoCardCollapse && "my-collapse"
+            )}
+          >
+            <CardComponent
+              timeline={timeline}
+              onManage={props.onManage}
+              onMember={props.onMember}
+              syncStatus={syncStatus}
+              collapse={infoCardCollapse}
+              toggleCollapse={() => {
+                const newState = !infoCardCollapse;
+                setInfoCardCollapse(newState);
+                if (timeline != null) {
+                  window.localStorage.setItem(
+                    genCardCollapseLocalStorageKey(timeline.uniqueId),
+                    newState.toString()
+                  );
+                }
+              }}
+            />
+          </div>
           {timelineBody}
         </>
       );
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass b/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
index ad024c78..3bcd4a67 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
+++ b/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
@@ -138,14 +138,17 @@ $timeline-line-color-current: #36c2e6
   vertical-align: middle
   margin-right: 0.6em
 
-.timeline-info-card
+.timeline-template-info-card
   position: sticky
   z-index: 1
   top: 56px
-  margin: 0.5em
+  padding: 0.5em
 
   @include media-breakpoint-down(sm)
-    margin-bottom: 0
+    padding-bottom: 0
+
+    &.my-collapse
+      float: right
 
   @include media-breakpoint-up(sm)
     float: right