diff --git a/src/renderer/components/sidebar/SidebarTaskItem.tsx b/src/renderer/components/sidebar/SidebarTaskItem.tsx index 2b5c1a12..fdbe3be9 100644 --- a/src/renderer/components/sidebar/SidebarTaskItem.tsx +++ b/src/renderer/components/sidebar/SidebarTaskItem.tsx @@ -1,7 +1,6 @@ import { memo, useEffect, useMemo, useRef, useState } from 'react'; import { useAppTranslation } from '@features/localization/renderer'; -import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip'; import { getTeamColorSet } from '@renderer/constants/teamColors'; import { useTheme } from '@renderer/hooks/useTheme'; import { useUnreadCommentCount } from '@renderer/hooks/useUnreadCommentCount'; @@ -178,7 +177,7 @@ export const SidebarTaskItem = memo(function SidebarTaskItem({ return ( - - - {launchingTeamName === team.teamName - ? t('list.actions.launching') - : launchLabel} - - + ) : null} {status === 'active' || status === 'idle' ? ( - - - - - - {stoppingTeamName === team.teamName - ? t('list.actions.stopping') - : t('list.actions.stopTeam')} - - + ) : null} {!team.pendingCreate ? ( - - - - - {t('list.actions.copyTeam')} - + ) : null} - - - - - {t('list.actions.deleteTeam')} - + diff --git a/src/renderer/components/team/activity/ActivityItem.tsx b/src/renderer/components/team/activity/ActivityItem.tsx index fac70448..2ac18f5b 100644 --- a/src/renderer/components/team/activity/ActivityItem.tsx +++ b/src/renderer/components/team/activity/ActivityItem.tsx @@ -10,12 +10,7 @@ import { AttachmentDisplay } from '@renderer/components/team/attachments/Attachm import { MemberBadge } from '@renderer/components/team/MemberBadge'; import { TaskTooltip } from '@renderer/components/team/TaskTooltip'; import { ExpandableContent } from '@renderer/components/ui/ExpandableContent'; -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from '@renderer/components/ui/tooltip'; +import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip'; import { CARD_BG, CARD_BG_ZEBRA, @@ -1310,7 +1305,7 @@ export const ActivityItem = memo( return (
- - - -
- -
-
- - {compactPreviewTooltipText} - -
-
+
+ +
) : !isExpanded ? (
@@ -1506,27 +1488,14 @@ export const ActivityItem = memo( )}
- - - -
- -
-
- - {compactPreviewTooltipText} - -
-
+
+ +
) : ( <> diff --git a/src/renderer/components/team/activity/ActivityTimeline.tsx b/src/renderer/components/team/activity/ActivityTimeline.tsx index da99c9f3..1c2da89b 100644 --- a/src/renderer/components/team/activity/ActivityTimeline.tsx +++ b/src/renderer/components/team/activity/ActivityTimeline.tsx @@ -83,6 +83,8 @@ export interface TimelineViewport { scrollMargin?: number; /** Enable virtualization (wired in a follow-up; ignored for now). */ virtualizationEnabled?: boolean; + /** Optional row-count gate for compact hosts that need virtualization earlier. */ + virtualizationRowThreshold?: number; } interface ActivityTimelineProps { @@ -692,7 +694,7 @@ export const ActivityTimeline = React.memo(function ActivityTimeline({ const shouldVirtualize = viewport?.virtualizationEnabled === true && viewport.scrollElementRef != null && - renderRows.length >= VIRTUALIZATION_ROW_THRESHOLD; + renderRows.length >= (viewport.virtualizationRowThreshold ?? VIRTUALIZATION_ROW_THRESHOLD); // DOM-measured distance from the scroll container's scroll origin to the // timeline root. We avoid re-measuring on every scroll: the offset only diff --git a/src/renderer/components/team/activity/AnimatedHeightReveal.tsx b/src/renderer/components/team/activity/AnimatedHeightReveal.tsx index 8ba8ed41..bdf1ef8c 100644 --- a/src/renderer/components/team/activity/AnimatedHeightReveal.tsx +++ b/src/renderer/components/team/activity/AnimatedHeightReveal.tsx @@ -28,6 +28,29 @@ export const AnimatedHeightReveal = ({ style, containerRef, children, +}: AnimatedHeightRevealProps): JSX.Element => { + if (!animate && !className && !style && !containerRef) { + return <>{children}; + } + + return ( + + {children} + + ); +}; + +const AnimatedHeightRevealInner = ({ + animate, + className, + style, + containerRef, + children, }: AnimatedHeightRevealProps): JSX.Element => { const [shouldAnimateOnMount] = useState(() => Boolean(animate)); const wrapperRef = useRef(null); diff --git a/src/renderer/components/team/messages/MessagesPanel.tsx b/src/renderer/components/team/messages/MessagesPanel.tsx index 6ec504cb..646305e8 100644 --- a/src/renderer/components/team/messages/MessagesPanel.tsx +++ b/src/renderer/components/team/messages/MessagesPanel.tsx @@ -363,8 +363,9 @@ export const MessagesPanel = memo(function MessagesPanel({ // path for short lists and only switches to the windowed path once // the row count crosses its internal threshold. virtualizationEnabled: true, + virtualizationRowThreshold: position === 'sidebar' ? 24 : undefined, }; - }, [activeScrollContainerRef]); + }, [activeScrollContainerRef, position]); const handleExpandContent = useCallback(() => { // no-op: user is reading expanded content, not composing }, []); diff --git a/src/renderer/index.css b/src/renderer/index.css index 0fab931e..39b03ddb 100644 --- a/src/renderer/index.css +++ b/src/renderer/index.css @@ -1470,6 +1470,25 @@ a[href], --row-zebra-bg: color-mix(in srgb, var(--color-surface-raised) 99%, var(--color-text) 1%); --row-zebra-hover-bg: color-mix(in srgb, var(--row-zebra-bg) 97%, var(--color-text) 3%); background-color: var(--row-card-bg); + content-visibility: auto; +} + +.team-row-zebra-card { + contain-intrinsic-size: auto 260px; +} + +.project-row-zebra-card { + contain-intrinsic-size: auto 190px; +} + +.activity-timeline-card { + content-visibility: auto; + contain-intrinsic-size: auto 96px; +} + +.sidebar-task-item { + content-visibility: auto; + contain-intrinsic-size: auto 52px; } .team-row-zebra-card:hover,