diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx index 4231b669aa76b..73de6d7d74815 100644 --- a/apps/web/src/components/DiffPanel.tsx +++ b/apps/web/src/components/DiffPanel.tsx @@ -1451,7 +1451,7 @@ export default function DiffPanel({ viewerRef={attachCodeView} onScroll={codeViewScroll.onScroll} codeViewKey={codeViewMountKey} - className="h-full min-h-0 overflow-auto" + className="scrollbar-gutter-stable scrollbar-edge-inset h-full min-h-0 overflow-auto" files={codeViewFiles} pendingFiles={pendingFiles} renderCodeViewFooter={renderLoadingBoundary} diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx index 3bbea6a44eb21..18192819b406a 100644 --- a/apps/web/src/components/chat/MessagesTimeline.tsx +++ b/apps/web/src/components/chat/MessagesTimeline.tsx @@ -1460,7 +1460,7 @@ const ConversationTimeline = memo(function ConversationTimeline({ onItemSizeChanged={scheduleMinimapRefresh} onMetricsChange={scheduleMinimapRefresh} className={cn( - "messages-timeline-scroll scrollbar-gutter-both h-full min-h-0 overflow-x-hidden overscroll-y-contain [overflow-anchor:none]", + "messages-timeline-scroll scrollbar-gutter-both scrollbar-edge-inset h-full min-h-0 overflow-x-hidden overscroll-y-contain [overflow-anchor:none]", topFadeEnabled && "topbar-scroll-fade", )} ListHeaderComponent={listHeader} diff --git a/apps/web/src/components/chat/ThreadDetailsCard.tsx b/apps/web/src/components/chat/ThreadDetailsCard.tsx index 4e8a47a39791a..10e5c4acff951 100644 --- a/apps/web/src/components/chat/ThreadDetailsCard.tsx +++ b/apps/web/src/components/chat/ThreadDetailsCard.tsx @@ -13,7 +13,7 @@ import { Popover, PopoverPopup, PopoverCreateHandle } from "../ui/popover"; import { selectThreadPanelOpen, useRightPanelStore } from "../../rightPanelStore"; import { useChatCanvas } from "./ChatCanvasContext"; import { - THREAD_DETAILS_CARD_GAP, + THREAD_DETAILS_CARD_RIGHT, resolveThreadDetailsCardDensity, } from "./threadDetailsCardLayout"; import { observeResize } from "../../lib/observeResize"; @@ -181,7 +181,7 @@ export function ThreadDetailsCard({ anchor={anchor} align="end" // Account for the find panel's 8px card padding. - alignOffset={THREAD_DETAILS_CARD_GAP - 8} + alignOffset={THREAD_DETAILS_CARD_RIGHT - 8} collisionAvoidance={{ side: "shift", align: "shift", fallbackAxisSide: "none" }} side="bottom" sideOffset={topInset} diff --git a/apps/web/src/components/chat/ThreadFindBar.tsx b/apps/web/src/components/chat/ThreadFindBar.tsx index 466cd929a7580..578bebcd161da 100644 --- a/apps/web/src/components/chat/ThreadFindBar.tsx +++ b/apps/web/src/components/chat/ThreadFindBar.tsx @@ -62,7 +62,7 @@ export function ThreadFindBar(props: ThreadFindBarProps) { return (
{ container: { width, height: 900 }, maxChatWidth, composerHeight: 180, - detailsCard: { left: width - 292, right: width - 12, bottom: 400 }, + detailsCard: { left: width - 296, right: width - 16, bottom: 400 }, preview: player, }); it("keeps chat centered while the card fits beside it", () => { expect(withCard(1500).chat).toEqual({ left: 382, width: 736, insetStart: 0, insetEnd: 0 }); }); it("narrows chat only after it reaches the left padding", () => { - expect(withCard(1108).chat).toMatchObject({ left: 48, width: 736 }); - expect(withCard(1028).chat).toEqual({ left: 48, width: 656, insetStart: 0, insetEnd: 276 }); - expect(withCard(1012).chat).toMatchObject({ left: 48, width: 640 }); + expect(withCard(1112).chat).toMatchObject({ left: 48, width: 736 }); + expect(withCard(1032).chat).toEqual({ left: 48, width: 656, insetStart: 0, insetEnd: 280 }); + expect(withCard(1016).chat).toMatchObject({ left: 48, width: 640 }); }); it("reserves the marker gutter across widths where the details card fits", () => { - for (let width = 1012; width <= 1440; width++) { + for (let width = 1016; width <= 1440; width++) { const container = { width, height: 900 }; const card = resolveThreadDetailsCardLayout({ container, diff --git a/apps/web/src/components/chat/threadDetailsCardLayout.ts b/apps/web/src/components/chat/threadDetailsCardLayout.ts index 7b5e1be8f29b3..be3d3e5d28084 100644 --- a/apps/web/src/components/chat/threadDetailsCardLayout.ts +++ b/apps/web/src/components/chat/threadDetailsCardLayout.ts @@ -1,7 +1,10 @@ import type { PreviewMiniPlayerFrame } from "../preview/previewMiniPlayerLayout"; +import { SCROLLBAR_EDGE_INSET } from "~/lib/scrollbarEdgeInset"; import { DETAILS_CARD_CLEARANCE } from "./chatCanvasLayout"; export const THREAD_DETAILS_CARD_GAP = 12; +// Keeps the card's gap from the chat's inset scrollbar. +export const THREAD_DETAILS_CARD_RIGHT = THREAD_DETAILS_CARD_GAP + SCROLLBAR_EDGE_INSET; // Keep in sync with --thread-details-panel-width. const THREAD_DETAILS_CARD_WIDTH = 280; @@ -29,7 +32,8 @@ export function resolveThreadDetailsCardLayout({ }) { const gap = THREAD_DETAILS_CARD_GAP; const width = THREAD_DETAILS_CARD_WIDTH; - const x = container.width - width - gap; + const right = THREAD_DETAILS_CARD_RIGHT; + const x = container.width - width - right; if (x - DETAILS_CARD_CLEARANCE - lane.padding < lane.minChatWidth) return null; const y = gap + topInset; const height = @@ -39,7 +43,7 @@ export function resolveThreadDetailsCardLayout({ if (height < 160) return null; return { x, - right: gap, + right, width, y, height, diff --git a/apps/web/src/components/files/AttachmentFilePreview.tsx b/apps/web/src/components/files/AttachmentFilePreview.tsx index 1f70074eb44b8..e00ea884004fe 100644 --- a/apps/web/src/components/files/AttachmentFilePreview.tsx +++ b/apps/web/src/components/files/AttachmentFilePreview.tsx @@ -305,7 +305,7 @@ export function AttachmentFilePreview(props: { ) : kind === "markdown" && rendered ? ( - + ) : null ) : archive ? ( -
+
) : rows ? ( -
+
+ ); return ( -
+
{expanded ? ( Saved outputs only. Code is never executed. -
+
{props.notebook.cells.slice(0, visible).map((cell, index) => (
{ const top = event.currentTarget.scrollTop; setScrollTop(top); diff --git a/apps/web/src/components/files/ReadOnlySourcePreview.tsx b/apps/web/src/components/files/ReadOnlySourcePreview.tsx index 2fdfe04a238d6..8478aca0adf75 100644 --- a/apps/web/src/components/files/ReadOnlySourcePreview.tsx +++ b/apps/web/src/components/files/ReadOnlySourcePreview.tsx @@ -23,7 +23,7 @@ export default function ReadOnlySourcePreview(props: { {/* The desktop window only moves where CSS opts in, so keep a titlebar strip. */} {isElectron ? : null} -
+

Welcome to T3 Code diff --git a/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx b/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx index febf82441f514..c770634c26643 100644 --- a/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx +++ b/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx @@ -1661,7 +1661,7 @@ function PullRequestCodeTab({ {/* The viewer must own its scroll element to position virtual rows within it. */} - className="@container h-full overflow-auto [scrollbar-gutter:stable]" + className="@container scrollbar-edge-inset h-full overflow-auto [scrollbar-gutter:stable]" containerRef={scrollerRef} viewerRef={codeViewReveal.attach} items={items} diff --git a/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx b/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx index 4b706ef7eafd5..5da218924e9d6 100644 --- a/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx +++ b/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx @@ -827,7 +827,7 @@ export function PullRequestSummaryTab({ scrollRef.current = node; scrollerRef(node); }} - className="h-full overflow-y-auto" + className="scrollbar-gutter-stable scrollbar-edge-inset h-full overflow-y-auto" data-pull-request-summary-scroll >
diff --git a/apps/web/src/components/pullRequest/PullRequestTimelineTab.tsx b/apps/web/src/components/pullRequest/PullRequestTimelineTab.tsx index abefb7e1d7e87..fa2dab86f72f3 100644 --- a/apps/web/src/components/pullRequest/PullRequestTimelineTab.tsx +++ b/apps/web/src/components/pullRequest/PullRequestTimelineTab.tsx @@ -879,7 +879,10 @@ export function PullRequestTimelineTab({ if (events.length === 0) { return ( -
+

No activity yet.

@@ -901,7 +904,7 @@ export function PullRequestTimelineTab({ keyExtractor={rowKey} renderItem={renderRow} estimatedItemSize={140} - className="scrollbar-gutter-both h-full px-4" + className="scrollbar-gutter-both scrollbar-edge-inset h-full px-4" contentContainerClassName="relative mx-auto w-full max-w-3xl before:absolute before:bottom-10 before:left-[15px] before:top-6 before:w-px before:bg-border/45" ListHeaderComponent={ anchor !== null && targetIndex < 0 && revealUrl === undefined ? ( diff --git a/apps/web/src/components/pullRequest/PullRequestsColumn.tsx b/apps/web/src/components/pullRequest/PullRequestsColumn.tsx index de66666f92813..957eb26dd0ea1 100644 --- a/apps/web/src/components/pullRequest/PullRequestsColumn.tsx +++ b/apps/web/src/components/pullRequest/PullRequestsColumn.tsx @@ -230,7 +230,7 @@ export function PullRequestsColumn({
diff --git a/apps/web/src/components/pullRequest/guide/GuideTour.tsx b/apps/web/src/components/pullRequest/guide/GuideTour.tsx index 81074bef9ce22..ac78ca01364ef 100644 --- a/apps/web/src/components/pullRequest/guide/GuideTour.tsx +++ b/apps/web/src/components/pullRequest/guide/GuideTour.tsx @@ -95,7 +95,10 @@ export function GuideTour({ }, [active]); return ( -
+