fix: unify widget scroll areas
This commit is contained in:
ajnart committed
1 parent
1b843817a4
commit
60ffc34e73
16 files changed
+17
-20
No files matched your search
@@ -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,
|
||||
|
||||
@@ -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) => (
|
||||
|
||||
@@ -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}>
|
||||
|
||||
@@ -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}>
|
||||
|
||||
@@ -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}>
|
||||
|
||||
@@ -56,7 +56,6 @@ export const CalendarEventList = ({
|
||||
|
||||
return (
|
||||
<ScrollArea
|
||||
offsetScrollbars
|
||||
pt={5}
|
||||
w="100%"
|
||||
h={fillHeight ? "100%" : undefined}
|
||||
|
||||
@@ -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" }}>
|
||||
|
||||
@@ -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")}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -126,7 +126,6 @@ export default function MediaMissingWidget({
|
||||
) => (
|
||||
<ScrollArea
|
||||
h="100%"
|
||||
scrollbarSize={4}
|
||||
startScrollPosition={tabScrollPositionsRef.current[tab]}
|
||||
onScrollPositionChange={(position) => {
|
||||
tabScrollPositionsRef.current[tab] = position;
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -500,7 +500,6 @@ export function Notebook({
|
||||
|
||||
<ScrollArea
|
||||
mih="4rem"
|
||||
offsetScrollbars
|
||||
pl={12}
|
||||
pt={12}
|
||||
styles={{
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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}>
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in new issue
Block a user