...

2 files changed, 22 insertions, 12 deletions

diff --git a/FrontEnd/src/app/views/home/TimelineBoard.tsx b/FrontEnd/src/app/views/home/TimelineBoard.tsx
index 77801a57..93da14cb 100644
--- a/FrontEnd/src/app/views/home/TimelineBoard.tsx
+++ b/FrontEnd/src/app/views/home/TimelineBoard.tsx
@@ -38,17 +38,16 @@ const TimelineBoardItem: React.FC<TimelineBoardItemProps> = ({
 
   const content = (
     <>
-      <div>
-        {isPersonal ? (
-          <UserTimelineLogo className="icon" />
-        ) : (
-          <TimelineLogo className="icon" />
-        )}
-        {title}
-        <small className="ml-2 text-secondary">{name}</small>
-      </div>
+      {isPersonal ? (
+        <UserTimelineLogo className="icon" />
+      ) : (
+        <TimelineLogo className="icon" />
+      )}
+      <span className="title">{title}</span>
+      <small className="ml-2 text-secondary">{name}</small>
+      <span className="flex-grow-1"></span>
       {actions != null ? (
-        <div>
+        <div className="right">
           <i className="bi-trash icon-button text-danger px-2" />
           <i
             className="bi-grip-vertical icon-button text-gray px-2"
@@ -58,7 +57,11 @@ const TimelineBoardItem: React.FC<TimelineBoardItemProps> = ({
             }}
             onPointerUp={(e) => {
               actions.onMoveEnd(e);
-              e.currentTarget.releasePointerCapture(e.pointerId);
+              try {
+                e.currentTarget.releasePointerCapture(e.pointerId);
+              } catch (_) {
+                void null;
+              }
             }}
             onPointerMove={actions.onMoving}
           />
diff --git a/FrontEnd/src/app/views/home/home.sass b/FrontEnd/src/app/views/home/home.sass
index e2dc4b66..6af1b6d8 100644
--- a/FrontEnd/src/app/views/home/home.sass
+++ b/FrontEnd/src/app/views/home/home.sass
@@ -19,10 +19,17 @@
   transition: background 0.3s

   display: flex

   align-items: center

-  justify-content: space-between

   .icon

     height: 1.3em

     color: black

     @extend .mr-2

   &:hover

     background: $gray-300

+  .right

+    display: flex

+    align-items: center

+    flex-shrink: 0

+  .title

+    white-space: nowrap

+    overflow: hidden

+    text-overflow: ellipsis