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({
248248 if (!hasActiveThread || !activeProject) return null;
249249
250250 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">
252252 {isMobile ? (
253253 <MobileRunContextSelector
254254 envLocked={envLocked}
apps/web/src/components/ChatView.tsx+36-36
......@@ -5592,7 +5592,7 @@ function ChatViewContent(props: ChatViewProps) {
55925592 : undefined
55935593 }
55945594 >
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]">
55965596 <div ref={attachDraftHeroComposerAnchorRef} className="relative z-10">
55975597 <ChatComposer
55985598 composerRef={composerRef}
......@@ -5670,41 +5670,41 @@ function ChatViewContent(props: ChatViewProps) {
56705670 onExpandImage={onExpandTimelineImage}
56715671 />
56725672 </div>
5673 <div className="min-h-0">
5674 <div
5675 data-terminal-open={terminalUiState.terminalOpen ? "true" : undefined}
5676 className="relative z-0"
5677 >
5678 {isGitRepo && (
5679 <div className="pointer-events-auto">
5680 <BranchToolbar
5681 environmentId={activeThread.environmentId}
5682 threadId={activeThread.id}
5683 {...(routeKind === "draft" && draftId ? { draftId } : {})}
5684 onEnvModeChange={onEnvModeChange}
5685 startFromOrigin={startFromOrigin}
5686 onStartFromOriginChange={onStartFromOriginChange}
5687 {...(canOverrideServerThreadEnvMode
5688 ? { effectiveEnvModeOverride: envMode }
5689 : {})}
5690 {...(canOverrideServerThreadEnvMode
5691 ? {
5692 activeThreadBranchOverride: activeThreadBranch,
5693 onActiveThreadBranchOverrideChange:
5694 setPendingServerThreadBranch,
5695 }
5696 : {})}
5697 envLocked={envLocked}
5698 onComposerFocusRequest={scheduleComposerFocus}
5699 {...(canCheckoutPullRequestIntoThread
5700 ? { onCheckoutPullRequestRequest: openPullRequestDialog }
5701 : {})}
5702 {...(hasMultipleEnvironments ? { onEnvironmentChange } : {})}
5703 availableEnvironments={logicalProjectEnvironments}
5704 />
5705 </div>
5706 )}
5707 </div>
5673 </div>
5674 <div className="min-h-0">
5675 <div
5676 data-terminal-open={terminalUiState.terminalOpen ? "true" : undefined}
5677 className="relative z-0"
5678 >
5679 {isGitRepo && (
5680 <div className="pointer-events-auto">
5681 <BranchToolbar
5682 environmentId={activeThread.environmentId}
5683 threadId={activeThread.id}
5684 {...(routeKind === "draft" && draftId ? { draftId } : {})}
5685 onEnvModeChange={onEnvModeChange}
5686 startFromOrigin={startFromOrigin}
5687 onStartFromOriginChange={onStartFromOriginChange}
5688 {...(canOverrideServerThreadEnvMode
5689 ? { effectiveEnvModeOverride: envMode }
5690 : {})}
5691 {...(canOverrideServerThreadEnvMode
5692 ? {
5693 activeThreadBranchOverride: activeThreadBranch,
5694 onActiveThreadBranchOverrideChange:
5695 setPendingServerThreadBranch,
5696 }
5697 : {})}
5698 envLocked={envLocked}
5699 onComposerFocusRequest={scheduleComposerFocus}
5700 {...(canCheckoutPullRequestIntoThread
5701 ? { onCheckoutPullRequestRequest: openPullRequestDialog }
5702 : {})}
5703 {...(hasMultipleEnvironments ? { onEnvironmentChange } : {})}
5704 availableEnvironments={logicalProjectEnvironments}
5705 />
5706 </div>
5707 )}
57085708 </div>
57095709 </div>
57105710 <div
apps/web/src/index.css+31-2
......@@ -402,10 +402,39 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
402402 content: "";
403403 }
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
405430 .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%);
409438 }
410439
411440 .alert-glass {