authorgravatar for maria@kuuro.netmaria <maria@kuuro.net> 2026-07-23 12:52:15-04:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-07-23 12:52:15-04:00
log9cbe50d10de90684f4322d467dd1eafe9f726045
treea19b7c175dcd14f5dddf877fc22002e1cc6132d0
parent9d9208cec5ac6a3ddb61647644da2b99eee59bff
signature Signed by PGP key B5690EEEBB952194

fix(web): restore dark composer toolbar styling

3 files changed, 68 insertions(+), 39 deletions(-)

apps/web/src/components/BranchToolbar.tsx+1-1
...@@ -248,7 +248,7 @@ export const BranchToolbar = memo(function BranchToolbar({...@@ -248,7 +248,7 @@ export const BranchToolbar = memo(function BranchToolbar({
248 if (!hasActiveThread || !activeProject) return null;248 if (!hasActiveThread || !activeProject) return null;
249249
250 return (250 return (
251 <div className="flex w-full items-center gap-2 border-t border-border/60 px-3 py-2">251 <div className="chat-composer-context-strip -mt-4 mx-auto flex w-[calc(100%-1.5rem)] max-w-[calc(48rem-1.5rem)] items-center gap-2 pt-5 pb-1 ps-1">
252 {isMobile ? (252 {isMobile ? (
253 <MobileRunContextSelector253 <MobileRunContextSelector
254 envLocked={envLocked}254 envLocked={envLocked}
apps/web/src/components/ChatView.tsx+36-36
...@@ -5592,7 +5592,7 @@ function ChatViewContent(props: ChatViewProps) {...@@ -5592,7 +5592,7 @@ function ChatViewContent(props: ChatViewProps) {
5592 : undefined5592 : undefined
5593 }5593 }
5594 >5594 >
5595 <div className="chat-composer-glass-host mx-auto w-full max-w-3xl rounded-[22px]">5595 <div className="chat-composer-glass-host relative z-10 mx-auto w-full max-w-3xl rounded-[22px]">
5596 <div ref={attachDraftHeroComposerAnchorRef} className="relative z-10">5596 <div ref={attachDraftHeroComposerAnchorRef} className="relative z-10">
5597 <ChatComposer5597 <ChatComposer
5598 composerRef={composerRef}5598 composerRef={composerRef}
...@@ -5670,41 +5670,41 @@ function ChatViewContent(props: ChatViewProps) {...@@ -5670,41 +5670,41 @@ function ChatViewContent(props: ChatViewProps) {
5670 onExpandImage={onExpandTimelineImage}5670 onExpandImage={onExpandTimelineImage}
5671 />5671 />
5672 </div>5672 </div>
5673 <div className="min-h-0">5673 </div>
5674 <div5674 <div className="min-h-0">
5675 data-terminal-open={terminalUiState.terminalOpen ? "true" : undefined}5675 <div
5676 className="relative z-0"5676 data-terminal-open={terminalUiState.terminalOpen ? "true" : undefined}
5677 >5677 className="relative z-0"
5678 {isGitRepo && (5678 >
5679 <div className="pointer-events-auto">5679 {isGitRepo && (
5680 <BranchToolbar5680 <div className="pointer-events-auto">
5681 environmentId={activeThread.environmentId}5681 <BranchToolbar
5682 threadId={activeThread.id}5682 environmentId={activeThread.environmentId}
5683 {...(routeKind === "draft" && draftId ? { draftId } : {})}5683 threadId={activeThread.id}
5684 onEnvModeChange={onEnvModeChange}5684 {...(routeKind === "draft" && draftId ? { draftId } : {})}
5685 startFromOrigin={startFromOrigin}5685 onEnvModeChange={onEnvModeChange}
5686 onStartFromOriginChange={onStartFromOriginChange}5686 startFromOrigin={startFromOrigin}
5687 {...(canOverrideServerThreadEnvMode5687 onStartFromOriginChange={onStartFromOriginChange}
5688 ? { effectiveEnvModeOverride: envMode }5688 {...(canOverrideServerThreadEnvMode
5689 : {})}5689 ? { effectiveEnvModeOverride: envMode }
5690 {...(canOverrideServerThreadEnvMode5690 : {})}
5691 ? {5691 {...(canOverrideServerThreadEnvMode
5692 activeThreadBranchOverride: activeThreadBranch,5692 ? {
5693 onActiveThreadBranchOverrideChange:5693 activeThreadBranchOverride: activeThreadBranch,
5694 setPendingServerThreadBranch,5694 onActiveThreadBranchOverrideChange:
5695 }5695 setPendingServerThreadBranch,
5696 : {})}5696 }
5697 envLocked={envLocked}5697 : {})}
5698 onComposerFocusRequest={scheduleComposerFocus}5698 envLocked={envLocked}
5699 {...(canCheckoutPullRequestIntoThread5699 onComposerFocusRequest={scheduleComposerFocus}
5700 ? { onCheckoutPullRequestRequest: openPullRequestDialog }5700 {...(canCheckoutPullRequestIntoThread
5701 : {})}5701 ? { onCheckoutPullRequestRequest: openPullRequestDialog }
5702 {...(hasMultipleEnvironments ? { onEnvironmentChange } : {})}5702 : {})}
5703 availableEnvironments={logicalProjectEnvironments}5703 {...(hasMultipleEnvironments ? { onEnvironmentChange } : {})}
5704 />5704 availableEnvironments={logicalProjectEnvironments}
5705 </div>5705 />
5706 )}5706 </div>
5707 </div>5707 )}
5708 </div>5708 </div>
5709 </div>5709 </div>
5710 <div5710 <div
apps/web/src/index.css+31-2
...@@ -402,10 +402,39 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil...@@ -402,10 +402,39 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
402 content: "";402 content: "";
403 }403 }
404404
405 .chat-composer-context-strip {
406 --chat-composer-context-surface: var(--card);
407
408 position: relative;
409 isolation: isolate;
410 }
411
412 .chat-composer-context-strip::before {
413 position: absolute;
414 z-index: -1;
415 inset: 0;
416 border-radius: 0 0 16px 16px;
417 background: color-mix(
418 in srgb,
419 var(--chat-composer-context-surface) var(--glass-opacity),
420 transparent
421 );
422 -webkit-mask-image: linear-gradient(to bottom, transparent 0 1rem, black 1rem);
423 mask-image: linear-gradient(to bottom, transparent 0 1rem, black 1rem);
424 box-shadow: 0 12px 28px -18px rgb(0 0 0 / 40%);
425 content: "";
426 -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
427 backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
428 }
429
405 .dark .chat-composer-glass-host {430 .dark .chat-composer-glass-host {
406 --chat-composer-glass-surface: color-mix(in srgb, var(--background) 84%, var(--color-white));431 --chat-composer-glass-surface: color-mix(in srgb, var(--background) 96%, var(--color-white));
432
433 box-shadow: none;
434 }
407435
408 box-shadow: 0 0 0 1px rgb(255 255 255 / 10%);436 .dark .chat-composer-context-strip::before {
437 box-shadow: 0 14px 32px -18px rgb(0 0 0 / 75%);
409 }438 }
410439
411 .alert-glass {440 .alert-glass {