From 60ffc34e73be8c7d29ba8b4b4aa1f842c2cab43a Mon Sep 17 00:00:00 2001
From: ajnart <thomas@ajnart.dev>
Date: Sun, 23 Aug 2026 01:09:02 +0200
Subject: [PATCH] fix: unify widget scroll areas

---
 packages/ui/src/theme.ts                                 | 8 ++++++++
 packages/widgets/src/_inputs/json-path-tree-picker.tsx   | 2 +-
 packages/widgets/src/air-quality/component.tsx           | 2 +-
 packages/widgets/src/bookmarks/add-button.tsx            | 2 +-
 packages/widgets/src/bookmarks/bookmarks-widget.tsx      | 4 ----
 packages/widgets/src/calendar/calendar-event-list.tsx    | 1 -
 packages/widgets/src/clock/advanced-view.tsx             | 3 ---
 packages/widgets/src/countdown/component.tsx             | 2 +-
 packages/widgets/src/dns-hole/summary/component.tsx      | 2 +-
 packages/widgets/src/immich/album-carousel/component.tsx | 2 +-
 packages/widgets/src/media-missing/component.tsx         | 1 -
 packages/widgets/src/media-requests/list/component.tsx   | 1 -
 packages/widgets/src/notebook/notebook.tsx               | 1 -
 packages/widgets/src/timer/component.tsx                 | 2 +-
 packages/widgets/src/vpn/component.tsx                   | 2 +-
 packages/widgets/src/weather/advanced.tsx                | 2 +-
 16 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/packages/ui/src/theme.ts b/packages/ui/src/theme.ts
index decaabbe2..b4db17edf 100644
--- a/packages/ui/src/theme.ts
+++ b/packages/ui/src/theme.ts
@@ -96,6 +96,14 @@ export const theme = createTheme({
         style: { borderRadius: 5 },
       },
     },
+    ScrollArea: {
+      defaultProps: {
+        type: "hover",
+        scrollbarSize: 2,
+        scrollHideDelay: 500,
+        offsetScrollbars: true,
+      },
+    },
     LoadingOverlay: {
       defaultProps: {
         zIndex: 1000,
diff --git a/packages/widgets/src/_inputs/json-path-tree-picker.tsx b/packages/widgets/src/_inputs/json-path-tree-picker.tsx
index d449c1b0a..97e0b5a38 100644
--- a/packages/widgets/src/_inputs/json-path-tree-picker.tsx
+++ b/packages/widgets/src/_inputs/json-path-tree-picker.tsx
@@ -324,7 +324,7 @@ export function JsonPathTreePicker({
           </Combobox.Header>
         )}
         <Combobox.Options>
-          <ScrollArea.Autosize mah={420} type="scroll">
+          <ScrollArea.Autosize mah={420}>
             {!hasData && <Combobox.Empty>{noDataHint}</Combobox.Empty>}
             {hasData && visibleNodes.length === 0 && <Combobox.Empty>No matching paths</Combobox.Empty>}
             {visibleNodes.map((node) => (
diff --git a/packages/widgets/src/air-quality/component.tsx b/packages/widgets/src/air-quality/component.tsx
index 7ab1ff6b7..7ecbb0d53 100644
--- a/packages/widgets/src/air-quality/component.tsx
+++ b/packages/widgets/src/air-quality/component.tsx
@@ -177,7 +177,7 @@ const AdvancedAirQuality = ({ airQuality, options, width }: AirQualityViewProps
   ];
 
   return (
-    <ScrollArea h="100%" w="100%" type="auto" offsetScrollbars scrollbarSize={6}>
+    <ScrollArea h="100%" w="100%">
       <Stack gap="md" p="md">
         <Group justify="space-between" align="flex-start" wrap="wrap">
           <Stack gap={2}>
diff --git a/packages/widgets/src/bookmarks/add-button.tsx b/packages/widgets/src/bookmarks/add-button.tsx
index 96c960459..cb85d1095 100644
--- a/packages/widgets/src/bookmarks/add-button.tsx
+++ b/packages/widgets/src/bookmarks/add-button.tsx
@@ -163,7 +163,7 @@ export const BookmarkAddButton: SortableItemListInput<BookmarkSelectionItem, str
       </Combobox.DropdownTarget>
 
       <Combobox.Dropdown>
-        <ScrollArea.Autosize mah={280} type="auto">
+        <ScrollArea.Autosize mah={280}>
           <Combobox.Options>
             {pendingUrl && !selectedValues.has(pendingUrl.id) ? (
               <Combobox.Option value={createOptionValue}>
diff --git a/packages/widgets/src/bookmarks/bookmarks-widget.tsx b/packages/widgets/src/bookmarks/bookmarks-widget.tsx
index 3d8188c24..77b3971ba 100644
--- a/packages/widgets/src/bookmarks/bookmarks-widget.tsx
+++ b/packages/widgets/src/bookmarks/bookmarks-widget.tsx
@@ -148,11 +148,7 @@ export default function BookmarksWidget({
         </Center>
       ) : (
         <ScrollArea
-          type="hover"
           scrollbars={plan.horizontalScroll ? "x" : "y"}
-          scrollbarSize={2}
-          scrollHideDelay={500}
-          offsetScrollbars
           style={{ flex: 1, minHeight: 0 }}
         >
           <Box miw="100%" mih="100%" pb={2}>
diff --git a/packages/widgets/src/calendar/calendar-event-list.tsx b/packages/widgets/src/calendar/calendar-event-list.tsx
index 4392a01cb..0f8ffe715 100644
--- a/packages/widgets/src/calendar/calendar-event-list.tsx
+++ b/packages/widgets/src/calendar/calendar-event-list.tsx
@@ -56,7 +56,6 @@ export const CalendarEventList = ({
 
   return (
     <ScrollArea
-      offsetScrollbars
       pt={5}
       w="100%"
       h={fillHeight ? "100%" : undefined}
diff --git a/packages/widgets/src/clock/advanced-view.tsx b/packages/widgets/src/clock/advanced-view.tsx
index 4a3a3c197..e44ea35d1 100644
--- a/packages/widgets/src/clock/advanced-view.tsx
+++ b/packages/widgets/src/clock/advanced-view.tsx
@@ -68,9 +68,6 @@ export const AdvancedClockView = ({
     <ScrollArea
       h="100%"
       w="100%"
-      type="auto"
-      offsetScrollbars
-      scrollbarSize={6}
       aria-label={t("worldClock.advancedLabel")}
     >
       <Stack gap="md" p={{ base: "sm", sm: "md" }}>
diff --git a/packages/widgets/src/countdown/component.tsx b/packages/widgets/src/countdown/component.tsx
index 947b8be9c..5c19288b9 100644
--- a/packages/widgets/src/countdown/component.tsx
+++ b/packages/widgets/src/countdown/component.tsx
@@ -184,7 +184,7 @@ export default function CountdownWidget({
         onNotificationsChange={setNotifications}
       />
 
-      <ScrollArea type="auto" style={{ flex: 1, minHeight: 0 }}>
+      <ScrollArea style={{ flex: 1, minHeight: 0 }}>
         <Stack gap="md" pb="xs">
           <EventSection
             title={t("upcoming")}
diff --git a/packages/widgets/src/dns-hole/summary/component.tsx b/packages/widgets/src/dns-hole/summary/component.tsx
index b3f7e1426..257b8e7c3 100644
--- a/packages/widgets/src/dns-hole/summary/component.tsx
+++ b/packages/widgets/src/dns-hole/summary/component.tsx
@@ -104,7 +104,7 @@ export default function DnsHoleSummaryWidget({
         )}
       </SimpleGrid>
       {showSourceStatuses && (
-        <ScrollArea type="auto" scrollbarSize={4} px="xs" pb="xs">
+        <ScrollArea px="xs" pb="xs">
           <Group gap="xs" wrap="nowrap">
             {successfulSummaries.map(({ integration, summary }) => (
               <Badge
diff --git a/packages/widgets/src/immich/album-carousel/component.tsx b/packages/widgets/src/immich/album-carousel/component.tsx
index 765075ffd..cce1d816a 100644
--- a/packages/widgets/src/immich/album-carousel/component.tsx
+++ b/packages/widgets/src/immich/album-carousel/component.tsx
@@ -228,7 +228,7 @@ function Carousel({
         )}
       </Box>
       {advanced && (
-        <ScrollArea type="never" scrollbarSize={0} px="xs" py={6}>
+        <ScrollArea px="xs" py={6}>
           <Group gap={6} wrap="nowrap">
             {assets.map((asset, index) => (
               <UnstyledButton
diff --git a/packages/widgets/src/media-missing/component.tsx b/packages/widgets/src/media-missing/component.tsx
index bf3e14653..d1c669582 100644
--- a/packages/widgets/src/media-missing/component.tsx
+++ b/packages/widgets/src/media-missing/component.tsx
@@ -126,7 +126,6 @@ export default function MediaMissingWidget({
   ) => (
     <ScrollArea
       h="100%"
-      scrollbarSize={4}
       startScrollPosition={tabScrollPositionsRef.current[tab]}
       onScrollPositionChange={(position) => {
         tabScrollPositionsRef.current[tab] = position;
diff --git a/packages/widgets/src/media-requests/list/component.tsx b/packages/widgets/src/media-requests/list/component.tsx
index f0526aa65..f53bbf2c7 100644
--- a/packages/widgets/src/media-requests/list/component.tsx
+++ b/packages/widgets/src/media-requests/list/component.tsx
@@ -61,7 +61,6 @@ export default function MediaServerWidget({
       )}
       <ScrollArea
         className="mediaRequests-list-scrollArea"
-        scrollbarSize="md"
         style={{ flex: 1, minHeight: 0, pointerEvents: isEditMode ? "none" : undefined }}
       >
         <Stack className="mediaRequests-list-list" gap="xs" p="sm">
diff --git a/packages/widgets/src/notebook/notebook.tsx b/packages/widgets/src/notebook/notebook.tsx
index 60c646162..cff8d40c3 100644
--- a/packages/widgets/src/notebook/notebook.tsx
+++ b/packages/widgets/src/notebook/notebook.tsx
@@ -500,7 +500,6 @@ export function Notebook({
 
         <ScrollArea
           mih="4rem"
-          offsetScrollbars
           pl={12}
           pt={12}
           styles={{
diff --git a/packages/widgets/src/timer/component.tsx b/packages/widgets/src/timer/component.tsx
index 52f7f6342..317ccf4db 100644
--- a/packages/widgets/src/timer/component.tsx
+++ b/packages/widgets/src/timer/component.tsx
@@ -387,7 +387,7 @@ const AdvancedTimer = ({
   const t = useI18n("widget.timer");
   const phaseLabel = getTimerPhaseLabel(runtime, t);
   return (
-    <ScrollArea h="100%" w="100%" type="auto" offsetScrollbars scrollbarSize={6}>
+    <ScrollArea h="100%" w="100%">
       <Stack gap="md" p="md">
         <Paper
           withBorder
diff --git a/packages/widgets/src/vpn/component.tsx b/packages/widgets/src/vpn/component.tsx
index 0be06d16e..d20edd8cf 100644
--- a/packages/widgets/src/vpn/component.tsx
+++ b/packages/widgets/src/vpn/component.tsx
@@ -46,7 +46,7 @@ export default function VpnWidget({ options, integrationIds, width, height }: Wi
   }
 
   return (
-    <ScrollArea className="scroll-area-w100" w="100%" h="100%" offsetScrollbars p="xs">
+    <ScrollArea className="scroll-area-w100" w="100%" h="100%" p="xs">
       <SimpleGrid cols={width >= 640 ? 2 : 1} spacing="sm">
         {integrations.map((result) => (
           <Stack key={result.integration.id} gap={4}>
diff --git a/packages/widgets/src/weather/advanced.tsx b/packages/widgets/src/weather/advanced.tsx
index 4a4c3f0a9..007d9bc2b 100644
--- a/packages/widgets/src/weather/advanced.tsx
+++ b/packages/widgets/src/weather/advanced.tsx
@@ -143,7 +143,7 @@ export const AdvancedWeather = ({ height, options, weather, width }: AdvancedWea
   const ticks = hourly.filter((_, index) => index % layout.hourlyTickStep === 0).map((hour) => hour.observedAt);
 
   return (
-    <ScrollArea h="100%" w="100%" type="auto" offsetScrollbars scrollbarSize={6}>
+    <ScrollArea h="100%" w="100%">
       <Stack className={classes.advancedRoot} gap="md" p="md">
         <Group justify="space-between" align="flex-start" gap="md" wrap="wrap">
           <Group gap="md" wrap="nowrap">