style: tighten sidebar thread row spacing

Author: Dimillian

src/features/app/components/Sidebar.tsx

@@ -563,30 +563,31 @@ export function Sidebar({
                                       />
                                       <span className="thread-name">
                                         {thread.name}
+                                      </span>
+                                      <div className="thread-meta">
                                         {relativeTime && (
                                           <span className="thread-time">
-                                            {" "}
-                                            · {relativeTime}
+                                            {relativeTime}
                                           </span>
                                         )}
-                                      </span>
-                                      <div className="thread-menu">
-                                        <button
-                                          className="thread-menu-trigger"
-                                          aria-label="Thread menu"
-                                          onMouseDown={(event) =>
-                                            event.stopPropagation()
-                                          }
-                                          onClick={(event) =>
-                                            showThreadMenu(
-                                              event,
-                                              worktree.id,
-                                              thread.id,
-                                            )
-                                          }
-                                        >
-                                          ...
-                                        </button>
+                                        <div className="thread-menu">
+                                          <button
+                                            className="thread-menu-trigger"
+                                            aria-label="Thread menu"
+                                            onMouseDown={(event) =>
+                                              event.stopPropagation()
+                                            }
+                                            onClick={(event) =>
+                                              showThreadMenu(
+                                                event,
+                                                worktree.id,
+                                                thread.id,
+                                              )
+                                            }
+                                          >
+                                            ...
+                                          </button>
+                                        </div>
                                       </div>
                                     </div>
                                   );
@@ -686,26 +687,27 @@ export function Sidebar({
                             }`}
                             aria-hidden
                           />
-                          <span className="thread-name">
-                            {thread.name}
+                          <span className="thread-name">{thread.name}</span>
+                          <div className="thread-meta">
                             {relativeTime && (
                               <span className="thread-time">
-                                {" "}
-                                · {relativeTime}
+                                {relativeTime}
                               </span>
                             )}
-                          </span>
-                          <div className="thread-menu">
-                            <button
-                              className="thread-menu-trigger"
-                              aria-label="Thread menu"
-                              onMouseDown={(event) => event.stopPropagation()}
-                              onClick={(event) =>
-                                showThreadMenu(event, entry.id, thread.id)
-                              }
-                            >
-                              ...
-                            </button>
+                            <div className="thread-menu">
+                              <button
+                                className="thread-menu-trigger"
+                                aria-label="Thread menu"
+                                onMouseDown={(event) =>
+                                  event.stopPropagation()
+                                }
+                                onClick={(event) =>
+                                  showThreadMenu(event, entry.id, thread.id)
+                                }
+                              >
+                                ...
+                              </button>
+                            </div>
                           </div>
                         </div>
                       );

src/styles/sidebar.css

@@ -323,7 +323,7 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 4px 6px;
+  padding: 4px 2px 4px 6px;
   border-radius: 6px;
   color: var(--text-quiet);
   font-size: 12px;
@@ -376,11 +376,17 @@
 .thread-name {
   flex: 1;
   min-width: 0;
-  display: -webkit-box;
   overflow: hidden;
   text-overflow: ellipsis;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
+  white-space: nowrap;
+}
+
+.thread-meta {
+  margin-left: auto;
+  margin-right: -12px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
 }
 
 .thread-time {
@@ -389,18 +395,16 @@
   white-space: nowrap;
 }
 
-
 .thread-menu {
-  position: absolute;
-  right: 6px;
+  position: relative;
 }
 
 .thread-menu-trigger {
   border: none;
   background: transparent;
   color: var(--text-faint);
   font-size: 11px;
-  padding: 2px 4px;
+  padding: 2px 2px;
   cursor: pointer;
   -webkit-app-region: no-drag;
   opacity: 0;