From ecd28d4e0e98f6fb9dbe468e60b179d71b24bba3 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 27 Mar 2026 16:36:01 +0100
Subject: [PATCH] Remove ScrollShadowWrapper usage

Use a div with max-h-[300px] in TfvarsFilesPopover instead of
ScrollShadowWrapper
Remove the hideSides prop and always render the top and bottom scroll
shadows
in ScrollShadowWrapper
---
 .../terraform-tfvars-popover.tsx              |  4 +--
 .../scroll-shadow-wrapper.tsx                 | 31 ++++++++-----------
 2 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
index a3adecbce4d..1d297993fa9 100644
--- a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
+++ b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
@@ -247,7 +247,7 @@ export const TfvarsFilesPopover = () => {
               ))}
             </>
           ) : tfVarFiles.length > 0 ? (
-            <ScrollShadowWrapper hideSides className="max-h-[300px]">
+            <div className="max-h-[300px]">
               <Reorder.Group axis="y" values={tfVarFiles} onReorder={onReorder}>
                 {tfVarFiles?.map((file, index) => (
                   <Reorder.Item
@@ -263,7 +263,7 @@ export const TfvarsFilesPopover = () => {
                   </Reorder.Item>
                 ))}
               </Reorder.Group>
-            </ScrollShadowWrapper>
+            </div>
           ) : null}
         </div>
       </Popover.Content>
diff --git a/libs/shared/ui/src/lib/components/scroll-shadow-wrapper/scroll-shadow-wrapper.tsx b/libs/shared/ui/src/lib/components/scroll-shadow-wrapper/scroll-shadow-wrapper.tsx
index 14d24c193d5..8bf7e0d64f8 100644
--- a/libs/shared/ui/src/lib/components/scroll-shadow-wrapper/scroll-shadow-wrapper.tsx
+++ b/libs/shared/ui/src/lib/components/scroll-shadow-wrapper/scroll-shadow-wrapper.tsx
@@ -4,11 +4,10 @@ export interface ScrollShadowWrapperProps {
   children: ReactNode
   className?: string
   style?: CSSProperties
-  hideSides?: boolean
 }
 
 export function ScrollShadowWrapper(props: ScrollShadowWrapperProps) {
-  const { children, className = '', style = {}, hideSides = false } = props
+  const { children, className = '', style = {} } = props
 
   const [scrollTop, setScrollTop] = useState(0)
   const [scrollHeight, setScrollHeight] = useState(0)
@@ -53,23 +52,19 @@ export function ScrollShadowWrapper(props: ScrollShadowWrapperProps) {
       className={`relative overflow-y-auto pr-[1px] ${className}`}
       onScroll={onScrollHandler}
     >
-      {!hideSides && (
-        <div
-          data-testid="scroll-shadow-top"
-          className={`pointer-events-none sticky top-0 z-overlay -mb-4 h-5 w-full bg-scroll-shadow-up transition-opacity duration-300 ${
-            getVisibleSides().top ? 'opacity-100' : 'opacity-0'
-          }`}
-        />
-      )}
+      <div
+        data-testid="scroll-shadow-top"
+        className={`pointer-events-none sticky top-0 z-overlay -mb-4 h-5 w-full bg-scroll-shadow-up transition-opacity duration-300 ${
+          getVisibleSides().top ? 'opacity-100' : 'opacity-0'
+        }`}
+      />
       {children}
-      {!hideSides && (
-        <div
-          data-testid="scroll-shadow-bottom"
-          className={`pointer-events-none sticky bottom-0 z-overlay -mt-4 h-5 w-full rotate-180 bg-scroll-shadow-bottom transition-opacity duration-300 ${
-            getVisibleSides().bottom ? 'opacity-100' : 'opacity-0'
-          }`}
-        />
-      )}
+      <div
+        data-testid="scroll-shadow-bottom"
+        className={`pointer-events-none sticky bottom-0 z-overlay -mt-4 h-5 w-full rotate-180 bg-scroll-shadow-bottom transition-opacity duration-300 ${
+          getVisibleSides().bottom ? 'opacity-100' : 'opacity-0'
+        }`}
+      />
     </div>
   )
 }