authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-07-28 23:58:21+02:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-07-28 21:58:21+00:00
log2deea7abb0f9e4df71ca10da06a8d7268a4b9d42
treecda944bb65fc80f996639c3f1837b7e570faf6ee
parentb64ae880e0f88cd35e2f7e1f5fab868546fbe29b
signature Signed by PGP key B5690EEEBB952194

Prevent sidebar row labels from truncating (#4789)

1 files changed, 14 insertions(+), 6 deletions(-)

apps/web/src/components/SidebarV2.tsx+14-6
...@@ -213,7 +213,11 @@ function WorkingDuration(props: { startedAt: string | null }) {...@@ -213,7 +213,11 @@ function WorkingDuration(props: { startedAt: string | null }) {
213 return () => window.clearInterval(id);213 return () => window.clearInterval(id);
214 }, [startedMs]);214 }, [startedMs]);
215 if (Number.isNaN(startedMs)) return null;215 if (Number.isNaN(startedMs)) return null;
216 return <span className="tabular-nums">{formatWorkingDurationLabel(Date.now() - startedMs)}</span>;216 return (
217 <span className="font-mono tabular-nums">
218 {formatWorkingDurationLabel(Date.now() - startedMs)}
219 </span>
220 );
217}221}
218222
219function SidebarV2ThreadTooltip({223function SidebarV2ThreadTooltip({
...@@ -881,11 +885,15 @@ const SidebarV2Row = memo(function SidebarV2Row(props: {...@@ -881,11 +885,15 @@ const SidebarV2Row = memo(function SidebarV2Row(props: {
881 ) : (885 ) : (
882 <span className="flex-1" />886 <span className="flex-1" />
883 )}887 )}
884 <span className="relative ml-auto flex h-5 min-w-8 shrink-0 items-center justify-end pl-1 text-xs">888 {/* The visible state owns this slot's width: status at rest,
889 actions on hover/focus or while the popover is open. Keeping
890 the hidden state out of flow lets the project label reclaim
891 space without either state overlapping it. */}
892 <span className="group/v2-status-slot relative ml-auto flex h-5 min-w-8 shrink-0 items-stretch justify-end text-xs">
885 <span893 <span
886 className={cn(894 className={cn(
887 "tabular-nums text-muted-foreground/65 transition-opacity group-hover/v2-row:opacity-0",895 "self-center justify-self-end tabular-nums text-muted-foreground/65 transition-opacity group-focus-within/v2-status-slot:absolute group-focus-within/v2-status-slot:right-0 group-hover/v2-row:absolute group-hover/v2-row:right-0 group-hover/v2-row:opacity-0",
888 snoozeMenuOpen && "opacity-0",896 snoozeMenuOpen && "absolute right-0 opacity-0",
889 )}897 )}
890 >898 >
891 {topStatus ? (899 {topStatus ? (
...@@ -919,8 +927,8 @@ const SidebarV2Row = memo(function SidebarV2Row(props: {...@@ -919,8 +927,8 @@ const SidebarV2Row = memo(function SidebarV2Row(props: {
919 {props.settlementSupported || showSnoozeButton ? (927 {props.settlementSupported || showSnoozeButton ? (
920 <span928 <span
921 className={cn(929 className={cn(
922 "absolute inset-y-0 right-0 flex items-stretch opacity-0 transition-opacity focus-within:opacity-100 group-hover/v2-row:opacity-100",930 "absolute inset-y-0 right-0 flex items-stretch opacity-0 transition-opacity focus-within:static focus-within:opacity-100 group-hover/v2-row:static group-hover/v2-row:opacity-100",
923 snoozeMenuOpen && "opacity-100",931 snoozeMenuOpen && "static opacity-100",
924 )}932 )}
925 >933 >
926 {showSnoozeButton ? (934 {showSnoozeButton ? (