From ff3ee67d2f3997b13f3c0bdc6b910512d2854a2e Mon Sep 17 00:00:00 2001
From: Thomas Petersen <thomasp@squareup.com>
Date: Thu, 14 May 2026 21:05:55 -0400
Subject: [PATCH] fix(ui): align home timestamps and loading skeletons

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/features/home/ui/InboxDetailPane.tsx  | 78 +++++++++----------
 .../features/messages/ui/TimelineSkeleton.tsx | 13 ++--
 desktop/src/shared/ui/ViewLoadingFallback.tsx | 15 ++--
 3 files changed, 55 insertions(+), 51 deletions(-)

diff --git a/desktop/src/features/home/ui/InboxDetailPane.tsx b/desktop/src/features/home/ui/InboxDetailPane.tsx
index ca76f71165..151a1f5415 100644
--- a/desktop/src/features/home/ui/InboxDetailPane.tsx
+++ b/desktop/src/features/home/ui/InboxDetailPane.tsx
@@ -277,7 +277,7 @@ export function InboxDetailPane({
                 <div className="px-6 py-2">
                   <article
                     className={cn(
-                      "group/message flex items-start gap-2.5 px-2 py-1 transition-colors duration-1000",
+                      "group/message relative flex items-start gap-2.5 px-2 py-1 transition-colors duration-1000",
                       message.isSelected
                         ? cn(
                             isFocusHighlightVisible
@@ -292,6 +292,39 @@ export function InboxDetailPane({
                         : "home-inbox-context-message"
                     }
                   >
+                    {canReply || onToggleReaction ? (
+                      <div className="absolute right-2 top-1 z-10">
+                        <MessageActionBar
+                          activeReplyTargetId={replyTargetId}
+                          message={toActionBarMessage(message)}
+                          onReactionSelect={
+                            onToggleReaction
+                              ? (emoji) => {
+                                  const actionBarMessage =
+                                    toActionBarMessage(message);
+                                  const remove =
+                                    actionBarMessage.reactions?.some(
+                                      (reaction) =>
+                                        reaction.emoji === emoji &&
+                                        reaction.reactedByCurrentUser,
+                                    ) ?? false;
+                                  return onToggleReaction(
+                                    actionBarMessage,
+                                    emoji,
+                                    remove,
+                                  );
+                                }
+                              : undefined
+                          }
+                          onReply={
+                            canReply
+                              ? () => handleSelectReplyTarget(message)
+                              : undefined
+                          }
+                          reactions={message.reactions ?? []}
+                        />
+                      </div>
+                    ) : null}
                     <UserAvatar
                       avatarUrl={message.avatarUrl}
                       className="h-8 w-8 shrink-0 rounded-xl"
@@ -299,53 +332,18 @@ export function InboxDetailPane({
                       size="md"
                     />
                     <div className="-mt-1 min-w-0 flex-1">
-                      <div className="flex min-w-0 flex-wrap items-start gap-x-2 gap-y-0">
+                      <div className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0">
                         <p className="truncate text-sm font-semibold leading-none tracking-tight text-foreground">
                           {message.authorLabel}
                         </p>
+                        <p className="shrink-0 text-xs font-normal leading-none tabular-nums text-muted-foreground/55">
+                          {message.fullTimestampLabel}
+                        </p>
                         {message.isSelected ? (
                           <span className="text-[10px] font-semibold uppercase leading-none tracking-[0.14em] text-muted-foreground/70">
                             Inbox item
                           </span>
                         ) : null}
-                        <p className="ml-auto text-xs text-muted-foreground">
-                          {message.fullTimestampLabel}
-                        </p>
-                        {canReply || onToggleReaction ? (
-                          <div className="relative ml-1">
-                            <div className="absolute right-0 top-1/2 -translate-y-1/2">
-                              <MessageActionBar
-                                activeReplyTargetId={replyTargetId}
-                                message={toActionBarMessage(message)}
-                                onReactionSelect={
-                                  onToggleReaction
-                                    ? (emoji) => {
-                                        const actionBarMessage =
-                                          toActionBarMessage(message);
-                                        const remove =
-                                          actionBarMessage.reactions?.some(
-                                            (reaction) =>
-                                              reaction.emoji === emoji &&
-                                              reaction.reactedByCurrentUser,
-                                          ) ?? false;
-                                        return onToggleReaction(
-                                          actionBarMessage,
-                                          emoji,
-                                          remove,
-                                        );
-                                      }
-                                    : undefined
-                                }
-                                onReply={
-                                  canReply
-                                    ? () => handleSelectReplyTarget(message)
-                                    : undefined
-                                }
-                                reactions={message.reactions ?? []}
-                              />
-                            </div>
-                          </div>
-                        ) : null}
                       </div>
                       <div className="mt-1">
                         <Markdown
diff --git a/desktop/src/features/messages/ui/TimelineSkeleton.tsx b/desktop/src/features/messages/ui/TimelineSkeleton.tsx
index f1132a2f60..d4d156a194 100644
--- a/desktop/src/features/messages/ui/TimelineSkeleton.tsx
+++ b/desktop/src/features/messages/ui/TimelineSkeleton.tsx
@@ -5,13 +5,16 @@ export function TimelineSkeleton() {
 
   return (
     <>
-      {skeletonRows.map((row) => (
+      {skeletonRows.map((row, index) => (
         <div className="flex gap-2.5" key={row}>
-          <Skeleton className="h-8 w-8 rounded-lg" />
+          <Skeleton className="h-9 w-9 shrink-0 rounded-xl" />
           <div className="min-w-0 flex-1 space-y-1">
-            <Skeleton className="h-3.5 w-44" />
-            <Skeleton className="h-4 w-full max-w-2xl" />
-            <Skeleton className="h-4 w-full max-w-xl" />
+            <div className="flex items-baseline gap-2">
+              <Skeleton className="h-3.5 w-28" />
+              <Skeleton className="h-3 w-12" />
+            </div>
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className={index % 2 === 0 ? "h-4 w-4/5" : "h-4 w-2/3"} />
           </div>
         </div>
       ))}
diff --git a/desktop/src/shared/ui/ViewLoadingFallback.tsx b/desktop/src/shared/ui/ViewLoadingFallback.tsx
index 64dbc4f2c8..29243f7a9d 100644
--- a/desktop/src/shared/ui/ViewLoadingFallback.tsx
+++ b/desktop/src/shared/ui/ViewLoadingFallback.tsx
@@ -45,13 +45,16 @@ function LoadingHeaderSkeleton() {
 function MessageRowsSkeleton() {
   return (
     <>
-      {["first", "second", "third", "fourth", "fifth"].map((row) => (
+      {["first", "second", "third", "fourth", "fifth"].map((row, index) => (
         <div className="flex gap-3" key={row}>
-          <Skeleton className="h-8 w-8 shrink-0 rounded-lg" />
-          <div className="min-w-0 flex-1 space-y-2 pt-0.5">
-            <Skeleton className="h-3.5 w-40 max-w-[40%]" />
-            <Skeleton className="h-4 w-full max-w-3xl" />
-            <Skeleton className="h-4 w-full max-w-xl" />
+          <Skeleton className="h-9 w-9 shrink-0 rounded-xl" />
+          <div className="min-w-0 flex-1 space-y-1 pt-0.5">
+            <div className="flex items-baseline gap-2">
+              <Skeleton className="h-3.5 w-28" />
+              <Skeleton className="h-3 w-12" />
+            </div>
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className={index % 2 === 0 ? "h-4 w-4/5" : "h-4 w-2/3"} />
           </div>
         </div>
       ))}