diff --git a/app/src/features/conversations/components/ThreadGoalChip.tsx b/app/src/features/conversations/components/ThreadGoalChip.tsx index 01761a32b..17dbf7f6e 100644 --- a/app/src/features/conversations/components/ThreadGoalChip.tsx +++ b/app/src/features/conversations/components/ThreadGoalChip.tsx @@ -213,7 +213,12 @@ export function ThreadGoalFooterTrigger({ className={`shrink-0 rounded px-1 py-0.5 text-[10px] font-medium uppercase tracking-wide ${statusClasses(ctl.goal.status)}`}> {t(`conversations.threadGoal.status.${ctl.goal.status}`)} - + {/* Truncate long objectives instead of scrolling them. The full text is + reachable via the button's `title` tooltip (hover) and by clicking to + open the editor, so a moving label would only distract. */} + + {ctl.goal.objective} + ); } @@ -305,44 +310,6 @@ export function ThreadGoalEditorPanel({ ); } -/** - * Single-line label that gently marquees (ping-pong scroll) only when the text - * overflows its max width; otherwise it truncates. The scroll distance is - * measured and fed to the `goal-marquee` keyframe via a CSS variable. - */ -function MarqueeText({ - text, - className = '', -}: { - text: string; - className?: string; -}): React.ReactElement { - const outerRef = useRef(null); - const innerRef = useRef(null); - const [shift, setShift] = useState(0); - - useEffect(() => { - const outer = outerRef.current; - const inner = innerRef.current; - if (!outer || !inner) return; - const overflow = inner.scrollWidth - outer.clientWidth; - setShift(overflow > 4 ? overflow + 8 : 0); - }, [text]); - - return ( - - 0 ? 'animate-goal-marquee' : 'truncate'}`} - style={ - shift > 0 ? ({ '--goal-marquee-shift': `-${shift}px` } as React.CSSProperties) : undefined - }> - {text} - - - ); -} - function PanelButton({ label, onClick, diff --git a/app/tailwind.config.js b/app/tailwind.config.js index 332ac7df5..d2b06c9d2 100644 --- a/app/tailwind.config.js +++ b/app/tailwind.config.js @@ -271,10 +271,6 @@ module.exports = { 'float': 'float 3s ease-in-out infinite', 'ticker': 'ticker 30s linear infinite', 'wiggle': 'wiggle 0.5s ease-in-out', - // Gentle ping-pong scroll for overflowing single-line labels (e.g. a - // long thread-goal objective). Distance is supplied per-element via the - // `--goal-marquee-shift` CSS var; `alternate` returns it to the start. - 'goal-marquee': 'goalMarquee 6s ease-in-out infinite alternate', }, keyframes: { @@ -319,10 +315,6 @@ module.exports = { '25%': { transform: 'rotate(-9deg)' }, '75%': { transform: 'rotate(9deg)' }, }, - goalMarquee: { - '0%, 18%': { transform: 'translateX(0)' }, - '82%, 100%': { transform: 'translateX(var(--goal-marquee-shift, 0px))' }, - }, }, // Backdrop blur for glass morphism