From 30fb3d3285e0d254fc40c38afbb6828fbcb29039 Mon Sep 17 00:00:00 2001
From: Bircck <55695195+Bircck@users.noreply.github.com>
Date: Fri, 11 Sep 2026 07:12:18 +0200
Subject: [PATCH] fix(website): preserve keyboard scrolling in metadata margins

---
 Website/app/metadata/page.tsx             |   2 +-
 Website/components/datamodelview/List.tsx | 147 ++++++++++++----------
 2 files changed, 79 insertions(+), 70 deletions(-)

diff --git a/Website/app/metadata/page.tsx b/Website/app/metadata/page.tsx
index 5e5f38f..e5b480c 100644
--- a/Website/app/metadata/page.tsx
+++ b/Website/app/metadata/page.tsx
@@ -9,7 +9,7 @@ export default function Data() {
     <Suspense>
       <DatamodelViewProvider>
         <EntityFiltersProvider>
-          <Layout>
+          <Layout ignoreMargins>
             <DatamodelView />
           </Layout>
         </EntityFiltersProvider>
diff --git a/Website/components/datamodelview/List.tsx b/Website/components/datamodelview/List.tsx
index 37a77d5..7190f13 100644
--- a/Website/components/datamodelview/List.tsx
+++ b/Website/components/datamodelview/List.tsx
@@ -9,7 +9,7 @@ import { updateURL } from "@/lib/url-utils";
 import { copyToClipboard, generateGroupLink } from "@/lib/clipboard-utils";
 import { useSnackbar } from "@/contexts/SnackbarContext";
 import { useEntityFilters } from "@/contexts/EntityFiltersContext";
-import { Box, CircularProgress, debounce, Tooltip } from '@mui/material';
+import { Box, CircularProgress, Container, debounce, Tooltip } from '@mui/material';
 
 interface IListProps {
     setCurrentIndex: (index: number) => void;
@@ -284,76 +284,85 @@ export const List = ({ setCurrentIndex, entityActiveTabs }: IListProps) => {
             <Box className={`absolute w-full h-full flex items-center justify-center z-[100] transition-opacity duration-300 ${loadingSection ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>
                 <CircularProgress />
             </Box>
-            <div ref={parentRef} style={{ height: 'calc(100vh - var(--layout-header-desktop-height))', overflow: 'auto' }} className="relative no-scrollbar">
-
-                {/* Show no results message when searching but no items found */}
-                {flatItems.length === 0 && search && search.length >= 3 && (
-                    <div className="flex flex-col items-center justify-center h-64 text-gray-500">
-                        <div className="text-lg font-medium mb-2">No tables found</div>
-                        <div className="text-sm text-center">
-                            No attributes match your search for &quot;{search}&quot;
+            <div
+                ref={parentRef}
+                tabIndex={0}
+                role="region"
+                aria-label="Metadata tables"
+                style={{ height: 'calc(100vh - var(--layout-header-desktop-height))', overflow: 'auto' }}
+                className="relative no-scrollbar"
+            >
+                <Container maxWidth="xl">
+
+                    {/* Show no results message when searching but no items found */}
+                    {flatItems.length === 0 && search && search.length >= 3 && (
+                        <div className="flex flex-col items-center justify-center h-64 text-gray-500">
+                            <div className="text-lg font-medium mb-2">No tables found</div>
+                            <div className="text-sm text-center">
+                                No attributes match your search for &quot;{search}&quot;
+                            </div>
                         </div>
+                    )}
+
+                    {/* Virtualized list */}
+                    <div
+                        className={`mx-6 my-6 transition-opacity duration-300 ${loadingSection ? 'opacity-0 pointer-events-none' : 'opacity-100'}`}
+                        style={{
+                            height: `${rowVirtualizer.getTotalSize()}px`,
+                            width: 'calc(100% - 48px)',
+                            position: 'relative',
+                            visibility: flatItems.length === 0 ? 'hidden' : 'visible'
+                        }}
+                    >
+                        {rowVirtualizer.getVirtualItems().map((virtualItem) => {
+                            const item = flatItems[virtualItem.index];
+
+                            return (
+                                <div
+                                    key={virtualItem.key}
+                                    data-index={virtualItem.index}
+                                    style={{
+                                        position: 'absolute',
+                                        top: 0,
+                                        left: 0,
+                                        width: '100%',
+                                        transform: `translateY(${virtualItem.start}px)`,
+                                    }}
+                                    ref={(el) => {
+                                        if (el) {
+                                            rowVirtualizer.measureElement(el);
+                                        }
+                                    }}
+                                >
+                                    {item.type === 'group' ? (
+                                        <div className="flex items-center py-6 my-4">
+                                            <div className="flex-1 h-0.5 bg-gray-200" />
+                                            <Tooltip title="Copy link to this group">
+                                                <div
+                                                    className="px-4 text-md font-semibold text-gray-700 uppercase tracking-wide whitespace-nowrap cursor-pointer hover:text-blue-600 transition-colors"
+                                                    onClick={() => handleCopyGroupLink(item.group.Name)}
+                                                >
+                                                    {item.group.Name}
+                                                </div>
+                                            </Tooltip>
+                                            <div className="flex-1 h-0.5 bg-gray-200" />
+                                        </div>
+                                    ) : (
+                                        <div className="text-sm">
+                                            <Section
+                                                entity={item.entity}
+                                                group={item.group}
+                                                search={search}
+                                                activeTab={entityActiveTabs.get(item.entity.SchemaName)}
+                                                highlightSecurityRole={selectedSecurityRoles.length > 0 && hasSecurityRoleAccess(item.entity)}
+                                            />
+                                        </div>
+                                    )}
+                                </div>
+                            );
+                        })}
                     </div>
-                )}
-
-                {/* Virtualized list */}
-                <div
-                    className={`mx-6 my-6 transition-opacity duration-300 ${loadingSection ? 'opacity-0 pointer-events-none' : 'opacity-100'}`}
-                    style={{
-                        height: `${rowVirtualizer.getTotalSize()}px`,
-                        width: 'calc(100% - 48px)',
-                        position: 'relative',
-                        visibility: flatItems.length === 0 ? 'hidden' : 'visible'
-                    }}
-                >
-                    {rowVirtualizer.getVirtualItems().map((virtualItem) => {
-                        const item = flatItems[virtualItem.index];
-
-                        return (
-                            <div
-                                key={virtualItem.key}
-                                data-index={virtualItem.index}
-                                style={{
-                                    position: 'absolute',
-                                    top: 0,
-                                    left: 0,
-                                    width: '100%',
-                                    transform: `translateY(${virtualItem.start}px)`,
-                                }}
-                                ref={(el) => {
-                                    if (el) {
-                                        rowVirtualizer.measureElement(el);
-                                    }
-                                }}
-                            >
-                                {item.type === 'group' ? (
-                                    <div className="flex items-center py-6 my-4">
-                                        <div className="flex-1 h-0.5 bg-gray-200" />
-                                        <Tooltip title="Copy link to this group">
-                                            <div
-                                                className="px-4 text-md font-semibold text-gray-700 uppercase tracking-wide whitespace-nowrap cursor-pointer hover:text-blue-600 transition-colors"
-                                                onClick={() => handleCopyGroupLink(item.group.Name)}
-                                            >
-                                                {item.group.Name}
-                                            </div>
-                                        </Tooltip>
-                                        <div className="flex-1 h-0.5 bg-gray-200" />
-                                    </div>
-                                ) : (
-                                    <div className="text-sm">
-                                        <Section
-                                            entity={item.entity}
-                                            group={item.group}
-                                            search={search}
-                                            activeTab={entityActiveTabs.get(item.entity.SchemaName)}
-                                            highlightSecurityRole={selectedSecurityRoles.length > 0 && hasSecurityRoleAccess(item.entity)}
-                                        />
-                                    </div>
-                                )}
-                            </div>
-                        );
-                    })}
-                </div>
+                </Container>
             </div>
         </>
     );