Scroll behavior part 2 (#1304)

* Fix layout issues introduced by scroll behavior

* Complete scrollbar work

front/src/modules/ui/layout/components/ShowPageContainer.tsx

@@ -2,14 +2,26 @@ import { ReactElement } from 'react';
 import styled from '@emotion/styled';
 
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 
-export const StyledShowPageContainer = styled.div`
+const StyledOuterContainer = styled.div`
   display: flex;
-  flex-direction: ${() => (useIsMobile() ? 'column' : 'row')};
+
   gap: ${({ theme }) => (useIsMobile() ? theme.spacing(3) : '0')};
   height: ${() => (useIsMobile() ? '100%' : 'auto')};
   overflow-x: ${() => (useIsMobile() ? 'hidden' : 'auto')};
-  width: ${() => (useIsMobile() ? `calc(100% - 2px);` : '100%')};
+  width: 100%;
+`;
+
+const StyledInnerContainer = styled.div`
+  display: flex;
+  flex-direction: ${() => (useIsMobile() ? 'column' : 'row')};
+  width: 100%;
+`;
+
+const StyledScrollWrapper = styled(ScrollWrapper)`
+  background-color: ${({ theme }) => theme.background.secondary};
+  border-radius: ${({ theme }) => theme.border.radius.md};
 `;
 
 export type ShowPageContainerProps = {
@@ -17,5 +29,16 @@ export type ShowPageContainerProps = {
 };
 
 export function ShowPageContainer({ children }: ShowPageContainerProps) {
-  return <StyledShowPageContainer>{children} </StyledShowPageContainer>;
+  const isMobile = useIsMobile();
+  return isMobile ? (
+    <StyledOuterContainer>
+      <StyledScrollWrapper>
+        <StyledInnerContainer>{children}</StyledInnerContainer>
+      </StyledScrollWrapper>
+    </StyledOuterContainer>
+  ) : (
+    <StyledOuterContainer>
+      <StyledInnerContainer>{children}</StyledInnerContainer>
+    </StyledOuterContainer>
+  );
 }

front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx

@@ -2,27 +2,33 @@ import { ReactElement } from 'react';
 import styled from '@emotion/styled';
 
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 
-const StyledShowPageLeftContainer = styled.div`
+const StyledOuterContainer = styled.div`
   background: ${({ theme }) => theme.background.secondary};
   border-bottom-left-radius: 8px;
-  border-right: 1px solid
-    ${({ theme }) => {
-      const isMobile = useIsMobile();
-      return !isMobile ? theme.border.color.medium : 0;
-    }};
+  border-right: ${({ theme }) => {
+    const isMobile = useIsMobile();
+    return !isMobile ? `1px solid ${theme.border.color.medium}` : 'none';
+  }};
   border-top-left-radius: 8px;
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(3)};
-  padding: 0px ${({ theme }) => theme.spacing(3)};
+
+  z-index: 10;
+`;
+
+const StyledInnerContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0px ${({ theme }) => theme.spacing(2)} 0px
+    ${({ theme }) => theme.spacing(3)};
   width: ${({ theme }) => {
     const isMobile = useIsMobile();
 
-    return isMobile ? `calc(100% - ${theme.spacing(6)})` : '320px';
+    return isMobile ? `calc(100% - ${theme.spacing(5)})` : '320px';
   }};
-
-  z-index: 10;
 `;
 
 export type ShowPageLeftContainerProps = {
@@ -32,5 +38,16 @@ export type ShowPageLeftContainerProps = {
 export function ShowPageLeftContainer({
   children,
 }: ShowPageLeftContainerProps) {
-  return <StyledShowPageLeftContainer>{children} </StyledShowPageLeftContainer>;
+  const isMobile = useIsMobile();
+  return isMobile ? (
+    <StyledOuterContainer>
+      <StyledInnerContainer>{children}</StyledInnerContainer>
+    </StyledOuterContainer>
+  ) : (
+    <StyledOuterContainer>
+      <ScrollWrapper>
+        <StyledInnerContainer>{children}</StyledInnerContainer>
+      </ScrollWrapper>
+    </StyledOuterContainer>
+  );
 }

front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx

@@ -9,11 +9,7 @@ export const StyledShowPageRightContainer = styled.div`
   flex-direction: column;
   justify-content: center;
   overflow: ${() => (useIsMobile() ? 'none' : 'hidden')};
-  width: ${({ theme }) => {
-    const isMobile = useIsMobile();
-
-    return isMobile ? `calc(100% - ${theme.spacing(6)})` : 'auto';
-  }};
+  width: calc(100% + 4px);
 `;
 
 export type ShowPageRightContainerProps = {