Scroll behavior part 2 (#1304)

* Fix layout issues introduced by scroll behavior

* Complete scrollbar work

front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx

@@ -0,0 +1,35 @@
+import { useRef } from 'react';
+import styled from '@emotion/styled';
+
+import { useListenScroll } from '../hooks/useListenScroll';
+
+const StyledScrollWrapper = styled.div`
+  display: flex;
+  height: 100%;
+  overflow: scroll;
+  scrollbar-gutter: stable;
+  width: 100%;
+
+  &.scrolling::-webkit-scrollbar-thumb {
+    background-color: ${({ theme }) => theme.border.color.medium};
+  }
+`;
+
+export type ScrollWrapperProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function ScrollWrapper({ children, className }: ScrollWrapperProps) {
+  const scrollableRef = useRef<HTMLDivElement>(null);
+
+  useListenScroll({
+    scrollableRef,
+  });
+
+  return (
+    <StyledScrollWrapper ref={scrollableRef} className={className}>
+      {children}
+    </StyledScrollWrapper>
+  );
+}

front/src/modules/ui/utilities/scroll/components/StyledScrollWrapper.tsx

@@ -1,12 +0,0 @@
-import styled from '@emotion/styled';
-
-export const StyledScrollWrapper = styled.div`
-  display: flex;
-  height: 100%;
-  overflow: auto;
-  width: 100%;
-
-  &.scrolling::-webkit-scrollbar-thumb {
-    background-color: ${({ theme }) => theme.border.color.medium};
-  }
-`;