Tighten sidebar timeline top inset (#5635)

Reduce the reserved timeline chrome inset and update sidebar timeline expectations.

Author: ComputelessComputer

apps/desktop/src/sidebar/timeline/index.test.tsx

@@ -221,11 +221,11 @@ describe("TimelineView", () => {
 
     expect(
       container.querySelector("[data-sidebar-timeline-top-spacer]")?.className,
-    ).toContain("h-12");
+    ).toContain("h-8");
     expect(
       container.querySelector("[data-sidebar-timeline-bucket-header]")
         ?.className,
-    ).toContain("top-12");
+    ).toContain("top-8");
   });
 
   it("pins bucket headers to the sidebar chrome while scrolled", () => {
@@ -251,7 +251,7 @@ describe("TimelineView", () => {
     );
 
     expect(scroller).toBeInstanceOf(HTMLDivElement);
-    expect(header?.className).toContain("top-12");
+    expect(header?.className).toContain("top-8");
 
     Object.defineProperty(scroller, "clientHeight", {
       configurable: true,
@@ -264,7 +264,7 @@ describe("TimelineView", () => {
     scroller!.scrollTop = 120;
     fireEvent.scroll(scroller!);
 
-    expect(header?.className).toContain("top-12");
+    expect(header?.className).toContain("top-8");
     expect(header?.className).toContain("z-20");
   });
 
@@ -450,7 +450,7 @@ describe("TimelineView", () => {
     );
     expect(
       container.querySelector("[data-sidebar-timeline-top-spacer]")?.className,
-    ).toContain("h-12");
+    ).toContain("h-8");
     expect(screen.queryByText("Now")).toBeNull();
 
     fireEvent.click(chip!);
@@ -587,11 +587,11 @@ describe("TimelineView", () => {
     expect(screen.getByRole("button", { name: "Go back to now" })).toBeTruthy();
     expect(
       container.querySelector("[data-sidebar-timeline-top-spacer]")?.className,
-    ).toContain("h-12");
+    ).toContain("h-8");
     expect(
       container.querySelector("[data-sidebar-timeline-bucket-header]")
         ?.className,
-    ).toContain("top-12");
+    ).toContain("top-8");
     expect(getTopFade(container).className).toContain("h-16");
   });
 

apps/desktop/src/sidebar/timeline/index.tsx

@@ -152,12 +152,12 @@ export function TimelineView({
   const topSpacerClassName = topChromeInset
     ? hasReservedTopChromeChip
       ? "h-20"
-      : "h-12"
+      : "h-8"
     : "h-10";
   const bucketHeaderTopClassName = topChromeInset
     ? hasReservedTopChromeChip
       ? "top-20"
-      : "top-12"
+      : "top-8"
     : "top-0";
   const selectedSessionScrollFrameRef = useRef<number | null>(null);
   const scrollSelectedSessionIntoView = useCallback<
@@ -466,7 +466,7 @@ export function TimelineView({
         <div
           className={cn([
             "absolute left-1/2 z-20 flex -translate-x-1/2 transform flex-col items-center gap-2",
-            topChromeInset ? "top-12" : "top-2",
+            topChromeInset ? "top-8" : "top-2",
           ])}
         >
           {showOpenCalendarChip && (