From 8897c2508d6925f1ec58f7d155f1daf8e2af7b39 Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Fri, 8 Aug 2025 17:39:17 -0700
Subject: [PATCH] Fixed scrolling on expanded view.

---
 .../[websiteId]/WebsiteDetailsPage.tsx        |  2 +-
 .../[websiteId]/WebsiteExpandedView.tsx       |  4 +-
 src/components/common/LoadingPanel.tsx        |  2 +-
 src/components/metrics/MetricsTable.tsx       | 49 ++++++++++---------
 4 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/WebsiteDetailsPage.tsx b/src/app/(main)/websites/[websiteId]/WebsiteDetailsPage.tsx
index 99517bb5..33bca5ae 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteDetailsPage.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteDetailsPage.tsx
@@ -34,7 +34,7 @@ export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
       </Panel>
       <WebsiteTableView websiteId={websiteId} />
       <Modal isOpen={!!view} onOpenChange={handleOpenChange} isDismissable>
-        <Dialog style={{ width: '90vw', height: '90vh' }}>
+        <Dialog style={{ maxWidth: 1320, width: '100vw', height: 'calc(100vh - 40px)' }}>
           {({ close }) => {
             return <WebsiteExpandedView websiteId={websiteId} onClose={() => handleClose(close)} />;
           }}
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx b/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
index dabb2f49..ad2f8653 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
@@ -133,7 +133,7 @@ export function WebsiteExpandedView({
   const DetailsComponent = views[view] || (() => null);
 
   return (
-    <Grid columns="auto 1fr" gap="6" height="100%">
+    <Grid columns="auto 1fr" gap="6" height="100%" overflow="hidden">
       <Column gap="6" width="200px" border="right" paddingRight="3">
         <NavMenu position="sticky" top="0">
           {items.map(({ id, label, path }) => {
@@ -145,7 +145,7 @@ export function WebsiteExpandedView({
           })}
         </NavMenu>
       </Column>
-      <Column>
+      <Column overflow="hidden">
         <DetailsComponent
           websiteId={websiteId}
           animate={false}
diff --git a/src/components/common/LoadingPanel.tsx b/src/components/common/LoadingPanel.tsx
index fd5561a2..177b9898 100644
--- a/src/components/common/LoadingPanel.tsx
+++ b/src/components/common/LoadingPanel.tsx
@@ -28,7 +28,7 @@ export function LoadingPanel({
   const empty = isEmpty ?? checkEmpty(data);
 
   return (
-    <Column position="relative" flexGrow={1} {...props}>
+    <Column position="relative" flexGrow={1} overflow="hidden" {...props}>
       {/* Show loading spinner only if no data exists */}
       {(isLoading || isFetching) && !data && <Loading icon={loadingIcon} position="page" />}
 
diff --git a/src/components/metrics/MetricsTable.tsx b/src/components/metrics/MetricsTable.tsx
index 8bac8f93..2f88b415 100644
--- a/src/components/metrics/MetricsTable.tsx
+++ b/src/components/metrics/MetricsTable.tsx
@@ -1,3 +1,5 @@
+import { ReactNode, useMemo, useState } from 'react';
+import { Button, Column, Icon, Row, SearchField, Text, Grid } from '@umami/react-zen';
 import { LinkButton } from '@/components/common/LinkButton';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import {
@@ -11,8 +13,7 @@ import { Close, Maximize } from '@/components/icons';
 import { DownloadButton } from '@/components/input/DownloadButton';
 import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
 import { percentFilter } from '@/lib/filters';
-import { Button, Column, Icon, Row, SearchField, Text } from '@umami/react-zen';
-import { ReactNode, useMemo, useState } from 'react';
+
 import { ListExpandedTable, ListExpandedTableProps } from './ListExpandedTable';
 import { ListTable, ListTableProps } from './ListTable';
 
@@ -115,11 +116,11 @@ export function MetricsTable({
   const downloadData = isExpanded ? data : filteredData;
 
   return (
-    <Column gap="3" justifyContent="space-between">
-      <LoadingPanel isFetching={isFetching} isLoading={isLoading} error={error} gap>
-        <Row alignItems="center" justifyContent="space-between">
+    <LoadingPanel data={data} isFetching={isFetching} isLoading={isLoading} error={error}>
+      <Grid rows="auto 1fr" height="100%" overflow="hidden" gap>
+        <Row alignItems="center">
           {allowSearch && <SearchField value={search} onSearch={setSearch} delay={300} />}
-          <Row gap>
+          <Row justifyContent="flex-end" flexGrow={1} gap>
             {children}
             {allowDownload && <DownloadButton filename={type} data={downloadData} />}
             {onClose && (
@@ -131,23 +132,25 @@ export function MetricsTable({
             )}
           </Row>
         </Row>
-        {data &&
-          (isExpanded ? (
-            <ListExpandedTable {...(props as ListExpandedTableProps)} data={data} />
-          ) : (
-            <ListTable {...(props as ListTableProps)} data={filteredData} />
-          ))}
-        <Row justifyContent="center">
-          {showMore && data && !error && limit && (
-            <LinkButton href={updateParams({ view: type })} variant="quiet">
-              <Icon size="sm">
-                <Maximize />
-              </Icon>
-              <Text>{formatMessage(labels.more)}</Text>
-            </LinkButton>
+        <Column overflowY="auto" minHeight="0" height="100%" paddingRight="3" overflow="hidden">
+          {data &&
+            (isExpanded ? (
+              <ListExpandedTable {...(props as ListExpandedTableProps)} data={data} />
+            ) : (
+              <ListTable {...(props as ListTableProps)} data={filteredData} />
+            ))}
+          {showMore && limit && (
+            <Row justifyContent="center">
+              <LinkButton href={updateParams({ view: type })} variant="quiet">
+                <Icon size="sm">
+                  <Maximize />
+                </Icon>
+                <Text>{formatMessage(labels.more)}</Text>
+              </LinkButton>
+            </Row>
           )}
-        </Row>
-      </LoadingPanel>
-    </Column>
+        </Column>
+      </Grid>
+    </LoadingPanel>
   );
 }