fix: preserve layout validation errors

apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx

@@ -111,9 +111,6 @@ export const LayoutSettingsContent = ({ board, form, isSaving, saveSettingsAsync
 
   const nextBreakpoint = getNextCustomBreakpoint(form.values.layouts);
   const baseLayout = form.values.layouts.find((layout) => layout.role === "base");
-  const sortedLayouts = form.values.layouts
-    .map((layout, index) => ({ layout, index }))
-    .toSorted((entryA, entryB) => entryA.layout.breakpoint - entryB.layout.breakpoint);
 
   return (
     <SectionCard title={tBoard("setting.section.layout.title")}>
@@ -129,25 +126,25 @@ export const LayoutSettingsContent = ({ board, form, isSaving, saveSettingsAsync
             disabled={nextBreakpoint === null || !baseLayout}
             onClick={() => {
               if (nextBreakpoint === null || !baseLayout) return;
-              form.setFieldValue("layouts", [
-                ...form.values.layouts,
-                {
-                  id: createId(),
-                  name: tBoard("setting.section.layout.custom.defaultName"),
-                  columnCount: baseLayout.columnCount,
-                  leftGutterColumnCount: baseLayout.leftGutterColumnCount,
-                  rightGutterColumnCount: baseLayout.rightGutterColumnCount,
-                  breakpoint: nextBreakpoint,
-                  role: "custom",
-                },
-              ]);
+              const newLayout: FormValues["layouts"][number] = {
+                id: createId(),
+                name: tBoard("setting.section.layout.custom.defaultName"),
+                columnCount: baseLayout.columnCount,
+                leftGutterColumnCount: baseLayout.leftGutterColumnCount,
+                rightGutterColumnCount: baseLayout.rightGutterColumnCount,
+                breakpoint: nextBreakpoint,
+                role: "custom",
+              };
+              let insertionIndex = form.values.layouts.findIndex((layout) => layout.breakpoint > nextBreakpoint);
+              if (insertionIndex === -1) insertionIndex = form.values.layouts.length;
+              form.insertListItem("layouts", newLayout, insertionIndex);
             }}
           >
             {tBoard("setting.section.layout.responsive.action.add")}
           </Button>
         </Group>
 
-        {sortedLayouts.map(({ layout, index }) => {
+        {form.values.layouts.map((layout, index) => {
           const persistedLayout = board.layouts.find((candidate) => candidate.id === layout.id);
           const sourceLayout = persistedLayout ?? board.layouts.find((candidate) => candidate.role === "base");
           const customBreakpoints = form.values.layouts

packages/ui/src/index.ts

@@ -2,7 +2,7 @@ import type { MantineProviderProps } from "@mantine/core";
 
 import { theme } from "./theme";
 
-export { scrollAreaDefaultProps, theme } from "./theme";
+export { theme } from "./theme";
 export { modalSizeForm, modalSizeSelect } from "./theme/modal";
 export * from "./components";
 

packages/ui/src/theme.ts

@@ -2,13 +2,6 @@ import { createTheme, rem } from "@mantine/core";
 
 import { modalComponent } from "./theme/modal";
 
-export const scrollAreaDefaultProps = {
-  type: "hover",
-  scrollbarSize: 2,
-  scrollHideDelay: 500,
-  offsetScrollbars: true,
-} as const;
-
 export const theme = createTheme({
   primaryColor: "red",
   autoContrast: true,
@@ -103,12 +96,6 @@ export const theme = createTheme({
         style: { borderRadius: 5 },
       },
     },
-    ScrollArea: {
-      defaultProps: scrollAreaDefaultProps,
-    },
-    ScrollAreaAutosize: {
-      defaultProps: scrollAreaDefaultProps,
-    },
     LoadingOverlay: {
       defaultProps: {
         zIndex: 1000,

packages/widgets/src/_inputs/json-path-tree-picker.tsx

@@ -324,7 +324,7 @@ export function JsonPathTreePicker({
           </Combobox.Header>
         )}
         <Combobox.Options>
-          <ScrollArea.Autosize mah={420}>
+          <ScrollArea.Autosize mah={420} type="scroll">
             {!hasData && <Combobox.Empty>{noDataHint}</Combobox.Empty>}
             {hasData && visibleNodes.length === 0 && <Combobox.Empty>No matching paths</Combobox.Empty>}
             {visibleNodes.map((node) => (

packages/widgets/src/air-quality/component.tsx

@@ -177,7 +177,7 @@ const AdvancedAirQuality = ({ airQuality, options, width }: AirQualityViewProps
   ];
 
   return (
-    <ScrollArea h="100%" w="100%">
+    <ScrollArea h="100%" w="100%" type="auto" offsetScrollbars scrollbarSize={6}>
       <Stack gap="md" p="md">
         <Group justify="space-between" align="flex-start" wrap="wrap">
           <Stack gap={2}>

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}>
+        <ScrollArea.Autosize mah={280} type="auto">
           <Combobox.Options>
             {pendingUrl && !selectedValues.has(pendingUrl.id) ? (
               <Combobox.Option value={createOptionValue}>

packages/widgets/src/bookmarks/bookmarks-widget.tsx

@@ -148,7 +148,11 @@ 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}>

packages/widgets/src/calendar/calendar-event-list.tsx

@@ -56,6 +56,7 @@ export const CalendarEventList = ({
 
   return (
     <ScrollArea
+      offsetScrollbars
       pt={5}
       w="100%"
       h={fillHeight ? "100%" : undefined}

packages/widgets/src/clock/advanced-view.tsx

@@ -68,6 +68,9 @@ 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" }}>

packages/widgets/src/common/homarr-data-table.css

@@ -22,16 +22,6 @@
   background-color: color-mix(in srgb, var(--mantine-color-default-hover) 40%, transparent) !important;
 }
 
-.homarr-data-table .mantine-datatable-scroll-area-scrollbar[data-state="visible"]:hover {
-  @mixin light {
-    background-color: var(--mantine-color-gray-0);
-  }
-
-  @mixin dark {
-    background-color: var(--mantine-color-dark-8);
-  }
-}
-
 .homarr-data-table th {
   padding: 0;
   white-space: nowrap;

packages/widgets/src/common/homarr-data-table.tsx

@@ -6,8 +6,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { DataTableColumn, DataTableProps } from "mantine-datatable";
 import { DataTable } from "mantine-datatable";
 
-import { scrollAreaDefaultProps } from "@homarr/ui";
-
 const fallbackColumnWidth = 60;
 
 const getColumnWidth = (width: string | number | undefined): number => {
@@ -155,7 +153,7 @@ export function HomarrDataTable<T>({
         resizable: !isEditMode,
         cellsStyle: defaultColumnProps?.cellsStyle ?? (() => ({ padding: cellPadding })),
       }}
-      scrollAreaProps={{ ...scrollAreaDefaultProps, ...scrollAreaProps }}
+      scrollAreaProps={{ type: "auto", scrollbarSize: 6, ...scrollAreaProps }}
     />
   );
 }

packages/widgets/src/countdown/component.tsx

@@ -184,7 +184,7 @@ export default function CountdownWidget({
         onNotificationsChange={setNotifications}
       />
 
-      <ScrollArea style={{ flex: 1, minHeight: 0 }}>
+      <ScrollArea type="auto" style={{ flex: 1, minHeight: 0 }}>
         <Stack gap="md" pb="xs">
           <EventSection
             title={t("upcoming")}

packages/widgets/src/dns-hole/summary/component.tsx

@@ -104,7 +104,7 @@ export default function DnsHoleSummaryWidget({
         )}
       </SimpleGrid>
       {showSourceStatuses && (
-        <ScrollArea px="xs" pb="xs">
+        <ScrollArea type="auto" scrollbarSize={4} px="xs" pb="xs">
           <Group gap="xs" wrap="nowrap">
             {successfulSummaries.map(({ integration, summary }) => (
               <Badge

packages/widgets/src/immich/album-carousel/component.tsx

@@ -228,7 +228,7 @@ function Carousel({
         )}
       </Box>
       {advanced && (
-        <ScrollArea px="xs" py={6}>
+        <ScrollArea type="never" scrollbarSize={0} px="xs" py={6}>
           <Group gap={6} wrap="nowrap">
             {assets.map((asset, index) => (
               <UnstyledButton

packages/widgets/src/media-missing/component.tsx

@@ -126,6 +126,7 @@ export default function MediaMissingWidget({
   ) => (
     <ScrollArea
       h="100%"
+      scrollbarSize={4}
       startScrollPosition={tabScrollPositionsRef.current[tab]}
       onScrollPositionChange={(position) => {
         tabScrollPositionsRef.current[tab] = position;

packages/widgets/src/media-requests/list/component.tsx

@@ -61,6 +61,7 @@ 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">

packages/widgets/src/notebook/notebook.tsx

@@ -500,6 +500,7 @@ export function Notebook({
 
         <ScrollArea
           mih="4rem"
+          offsetScrollbars
           pl={12}
           pt={12}
           styles={{

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%">
+    <ScrollArea h="100%" w="100%" type="auto" offsetScrollbars scrollbarSize={6}>
       <Stack gap="md" p="md">
         <Paper
           withBorder

packages/widgets/src/umami/component.module.css

@@ -5,6 +5,7 @@
 }
 
 .chartSurface :global(.mantine-ScrollArea-viewport),
+.chartSurface :global(.mantine-ScrollArea-scrollbar),
 .chartSurface :global(.recharts-wrapper),
 .chartSurface :global(.recharts-surface) {
   background-color: transparent !important;

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%" p="xs">
+    <ScrollArea className="scroll-area-w100" w="100%" h="100%" offsetScrollbars p="xs">
       <SimpleGrid cols={width >= 640 ? 2 : 1} spacing="sm">
         {integrations.map((result) => (
           <Stack key={result.integration.id} gap={4}>

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%">
+    <ScrollArea h="100%" w="100%" type="auto" offsetScrollbars scrollbarSize={6}>
       <Stack className={classes.advancedRoot} gap="md" p="md">
         <Group justify="space-between" align="flex-start" gap="md" wrap="wrap">
           <Group gap="md" wrap="nowrap">