From e9e0ed0968e1cb5466b7d9f074cd57531eb415c4 Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Tue, 25 Feb 2025 10:20:15 +0530
Subject: [PATCH] MINOR: fix the glossary pagination issue (#19954)

* fix the glossary infinite scroll issue

* remove unwanted height
---
 .../ResizablePanels/PanelContainer/PanelContainer.tsx       | 3 ++-
 .../pages/Glossary/GlossaryPage/GlossaryPage.component.tsx  | 6 ++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/ResizablePanels/PanelContainer/PanelContainer.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/ResizablePanels/PanelContainer/PanelContainer.tsx
index 2c317bf48ed..fa1fdc13852 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/ResizablePanels/PanelContainer/PanelContainer.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/ResizablePanels/PanelContainer/PanelContainer.tsx
@@ -22,7 +22,8 @@ const PanelContainer: React.FC<React.PropsWithChildren<PanelContainerProps>> =
     return (
       <div
         className={classNames(className, 'panel-container')}
-        data-testid="panel-container">
+        data-testid="panel-container"
+        id="panel-container">
         {overlay && width <= overlay.displayThreshold && (
           <div className="light-overlay">
             <Typography.Title
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.component.tsx
index d82cd80cce0..27e57bdde50 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.component.tsx
@@ -79,7 +79,8 @@ const GlossaryPage = () => {
     useState<boolean>(false);
   const [elementRef, isInView] = useElementInView({
     ...observerOptions,
-    rootMargin: '10px',
+    root: document.querySelector('#panel-container'),
+    rootMargin: '0px 0px 2px 0px',
   });
   const { paging, pageSize, handlePagingChange } = usePaging();
 
@@ -492,8 +493,9 @@ const GlossaryPage = () => {
           <>
             <GlossaryLeftPanel glossaries={glossaries} />
             <div
-              className="h-[1px] w-full"
+              className="w-full"
               data-testid="glossary-left-panel-scroller"
+              id="observer-element"
               ref={elementRef as RefObject<HTMLDivElement>}
             />
             {isMoreGlossaryLoading && <Loader />}