authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-09-22 12:22:12-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-22 12:22:12-07:00
logb4f1f18b735679aedc4369190fc3f07ecaf8966c
treea0ca6576044032553be36948622dc0ca221b75ec
parent9515016166f926968dacaefc69e2ea0af63942ae
signature Signed by PGP key B5690EEEBB952194

refactor(web): add radius="none" to ScrollArea (#13026)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

9 files changed, 25 insertions(+), 18 deletions(-)

apps/web/src/components/ChatMarkdown.tsx+1-1
......@@ -772,7 +772,7 @@ function MarkdownTable({ children, ...props }: React.ComponentProps<"table">) {
772772 className="chat-markdown-table-container"
773773 data-expanded={expanded ? "true" : "false"}
774774 >
775 <ScrollArea chainVerticalScroll scrollFade className="w-full max-w-full rounded-none">
775 <ScrollArea radius="none" chainVerticalScroll scrollFade className="w-full max-w-full">
776776 <table ref={tableRef} {...props}>
777777 {children}
778778 </table>
apps/web/src/components/RightPanelTabs.tsx+2-1
......@@ -1127,10 +1127,11 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
11271127 data-right-panel-tabbar
11281128 >
11291129 <ScrollArea
1130 radius="none"
11301131 ref={tabListRef}
11311132 hideScrollbars
11321133 scrollFade
1133 className="min-w-0 flex-1 rounded-none"
1134 className="min-w-0 flex-1"
11341135 data-right-panel-tab-list
11351136 >
11361137 <div className="flex h-full w-max min-w-full items-center gap-1">
apps/web/src/components/chat/ComposerBanner.tsx+2-1
......@@ -282,9 +282,10 @@ function Children({ className, render, ...props }: useRender.ComponentProps<"div
282282function Scroll({ className, ...props }: ComponentProps<typeof ScrollArea>) {
283283 return (
284284 <ScrollArea
285 radius="none"
285286 scrollFade
286287 className={cn(
287 "h-auto max-h-[min(24rem,40dvh)] rounded-none [&>[data-slot=scroll-area-viewport][data-has-overflow-y]]:pe-2",
288 "h-auto max-h-[min(24rem,40dvh)] [&>[data-slot=scroll-area-viewport][data-has-overflow-y]]:pe-2",
288289 className,
289290 )}
290291 {...props}
apps/web/src/components/files/FilePreviewPanel.tsx+2-1
......@@ -1090,10 +1090,11 @@ export default function FilePreviewPanel({
10901090 {relativePath && attachment === undefined ? (
10911091 <div className={FILE_SURFACE_SUBHEADER_CLASS} data-surface-subheader>
10921092 <ScrollArea
1093 radius="none"
10931094 ref={breadcrumbRef}
10941095 hideScrollbars
10951096 scrollFade
1096 className="min-w-0 flex-1 rounded-none"
1097 className="min-w-0 flex-1"
10971098 data-file-breadcrumbs
10981099 >
10991100 <div className="flex h-full w-max min-w-full items-center text-xs">
apps/web/src/components/onboarding/WelcomeWizard.tsx+2-8
......@@ -636,10 +636,7 @@ function AgentsStep({
636636 const { environments } = useEnvironments();
637637 return (
638638 <StepShell title="Your agents" description="Agents available on your selected computers.">
639 <ScrollArea
640 scrollFade
641 className="mt-5 h-auto max-h-96 [&_[data-slot=scroll-area-scrollbar]]:opacity-100"
642 >
639 <ScrollArea scrollFade className="mt-5 h-auto max-h-96">
643640 <div className="space-y-5 pr-3">
644641 {environmentIds.map((environmentId) => (
645642 <ConnectedAgentsStep
......@@ -1206,10 +1203,7 @@ function ImportStep({
12061203 </div>
12071204 </div>
12081205 ) : null}
1209 <ScrollArea
1210 scrollFade
1211 className="mt-2 h-auto max-h-80 [&_[data-slot=scroll-area-scrollbar]]:opacity-100"
1212 >
1206 <ScrollArea scrollFade className="mt-2 h-auto max-h-80">
12131207 <div className="space-y-5 pr-3">
12141208 {scans.map((scan) => {
12151209 const scanCandidates = candidates.filter(
apps/web/src/components/settings/DiagnosticsSettings.tsx+6-3
......@@ -172,10 +172,11 @@ function DiagnosticsTable({
172172}) {
173173 return (
174174 <ScrollArea
175 radius="none"
175176 chainVerticalScroll
176177 scrollFade
177178 hideScrollbars
178 className="w-full max-w-full rounded-none"
179 className="w-full max-w-full"
179180 >
180181 <table
181182 className={cn("w-full text-left text-xs", minTableWidth, columnWidths && "table-fixed")}
......@@ -355,10 +356,11 @@ function ProcessDiagnosticsTable({
355356
356357 return (
357358 <ScrollArea
359 radius="none"
358360 chainVerticalScroll
359361 scrollFade
360362 hideScrollbars
361 className="max-h-[min(64vh,44rem)] w-full max-w-full rounded-none border-t border-border/60"
363 className="max-h-[min(64vh,44rem)] w-full max-w-full border-t border-border/60"
362364 >
363365 <table className="w-full min-w-[1040px] table-fixed text-left text-xs">
364366 <colgroup>
......@@ -1224,10 +1226,11 @@ export function DiagnosticsSettingsPanel() {
12241226 <SettingsSection title="Span Logs">
12251227 {data && data.latestWarningAndErrorLogs.length > 0 ? (
12261228 <ScrollArea
1229 radius="none"
12271230 chainVerticalScroll
12281231 scrollFade
12291232 hideScrollbars
1230 className="w-full max-w-full rounded-none"
1233 className="w-full max-w-full"
12311234 >
12321235 <table className="w-full min-w-[920px] table-fixed text-left text-xs">
12331236 <colgroup>
apps/web/src/components/settings/ProviderSettingsPanel.tsx+1-1
......@@ -334,7 +334,7 @@ function ProviderSettingsPanelContent(target: ProviderSettingsTarget) {
334334 options.length === 1 && options[0]?.entry.target._tag === "PrimaryConnectionTarget";
335335 const deviceTabs =
336336 !target.scoped && !onlyPrimaryDevice && options.length > 0 ? (
337 <ScrollArea hideScrollbars scrollFade className="h-11 min-w-0 flex-1 rounded-none">
337 <ScrollArea radius="none" hideScrollbars scrollFade className="h-11 min-w-0 flex-1">
338338 <ToggleGroup
339339 aria-label="Devices"
340340 variant="segmented"
apps/web/src/components/ui/scroll-area.tsx+8-1
......@@ -29,6 +29,7 @@ function ScrollArea({
2929 scrollbarGutter = false,
3030 hideScrollbars = false,
3131 chainVerticalScroll = false,
32 radius = "inherit",
3233 ...props
3334}: ScrollAreaPrimitive.Root.Props & {
3435 scrollFade?: boolean;
......@@ -38,10 +39,16 @@ function ScrollArea({
3839 scrollbarGutter?: boolean;
3940 hideScrollbars?: boolean;
4041 chainVerticalScroll?: boolean;
42 /** The viewport clips to the parent's radius; "none" for a region flush to an edge. */
43 radius?: "inherit" | "none";
4144}) {
4245 return (
4346 <ScrollAreaPrimitive.Root
44 className={cn("relative size-full min-h-0 overflow-hidden rounded-[inherit]", className)}
47 className={cn(
48 "relative size-full min-h-0 overflow-hidden",
49 radius === "none" ? "rounded-none" : "rounded-[inherit]",
50 className,
51 )}
4552 {...props}
4653 >
4754 <ScrollAreaPrimitive.Viewport
scripts/lint-restyle-ceiling.ts+1-1
......@@ -8,7 +8,7 @@ import * as NodeURL from "node:url";
88// components/ui exports are migrated to variants (see vite.config.ts). This gate keeps the
99// count from growing: CI fails when findings exceed the ceiling. Lower the ceiling when you
1010// migrate a file, and delete this script when the rule becomes an error.
11export const RESTYLE_CEILING = 1070;
11export const RESTYLE_CEILING = 1060;
1212
1313const RULE = "shadcn(no-restyle)";
1414