fix(dashboard): scroll issues in modals

This commit is contained in:
Carl-Gerhard Lindesvärd
2025-06-06 14:20:29 +02:00
parent 34414e1d3e
commit 09c83ddeb4
5 changed files with 7 additions and 14 deletions

View File

@@ -60,7 +60,7 @@ export default function OverviewTopGenericModal({
return (
<ModalContent>
<ModalHeader title={`Top ${columnNamePlural}`} />
<ScrollArea className="-mx-6 px-2 max-h-[calc(80vh)]">
<ScrollArea className="-mx-6 px-2">
<OverviewWidgetTableGeneric
data={data}
column={{

View File

@@ -47,7 +47,7 @@ export default function OverviewTopPagesModal({
return (
<ModalContent>
<ModalHeader title="Top Pages" />
<ScrollArea className="-mx-6 px-2 max-h-[calc(80vh)]">
<ScrollArea className="-mx-6 px-2">
<OverviewWidgetTablePages
data={data ?? []}
lastColumnName={'Sessions'}

View File

@@ -40,20 +40,15 @@ const DialogContent = React.forwardRef<
ref={ref}
className={cn(
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] md:w-full p-2 sm:p-6',
'max-h-screen overflow-y-auto', // Ensure the dialog is scrollable if it exceeds the screen height
'max-h-screen overflow-y-auto overflow-x-hidden', // Ensure the dialog is scrollable if it exceeds the screen height
'mt-auto', // Add margin-top: auto for all screen sizes
'focus:outline-none focus:ring-0 transition-none',
'border bg-background shadow-lg sm:rounded-lg md:max-h-[90vh]',
className,
)}
{...props}
>
<div
className={cn(
'border bg-background p-6 shadow-lg sm:rounded-lg',
className,
)}
>
{children}
</div>
{children}
</DialogPrimitive.Content>
</DialogPortal>
));

View File

@@ -158,7 +158,7 @@ export default function EventDetails({ id, createdAt, projectId }: Props) {
}));
return (
<ModalContent className="p-0">
<ModalContent className="!p-0">
<Widget className="bg-transparent border-0">
<WidgetHead>
<div className="row items-center justify-between">

View File

@@ -49,7 +49,6 @@ build_image() {
-t "$image_name:latest" \
--build-arg DATABASE_URL="postgresql://p@p:5432/p" \
-f "apps/$app/Dockerfile" \
--push \
.
else
echo "Building multi-architecture image for $image_name:$VERSION-$PRERELEASE"
@@ -58,7 +57,6 @@ build_image() {
-t "$image_name:$VERSION-$PRERELEASE" \
--build-arg DATABASE_URL="postgresql://p@p:5432/p" \
-f "apps/$app/Dockerfile" \
--push \
.
fi