From 0d48466377ce0b10212c00629960b5d57473e90c Mon Sep 17 00:00:00 2001
From: Gustavo Santos <devgustavosantos@gmail.com>
Date: Sat, 20 Jul 2024 10:11:57 -0300
Subject: [PATCH] fix: the visible height of the table container

---
 src/components/CustomSimpleBar/hook.ts   | 26 ++++++++++++++++++++++++
 src/components/CustomSimpleBar/index.tsx |  9 ++++++--
 src/components/CustomSimpleBar/styles.ts | 11 +---------
 src/pages/History/styles.ts              |  7 ++++++-
 4 files changed, 40 insertions(+), 13 deletions(-)
 create mode 100644 src/components/CustomSimpleBar/hook.ts

diff --git a/src/components/CustomSimpleBar/hook.ts b/src/components/CustomSimpleBar/hook.ts
new file mode 100644
index 0000000..d92ff7c
--- /dev/null
+++ b/src/components/CustomSimpleBar/hook.ts
@@ -0,0 +1,26 @@
+import { useEffect, useRef, useState } from 'react';
+
+function useCustomSimpleBar() {
+  const [scrollBarMaxHeight, setScrollBarMaxHeight] = useState(0);
+  const scrollBarContainer = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    function handleResize() {
+      if (!scrollBarContainer?.current) return;
+
+      setScrollBarMaxHeight(scrollBarContainer.current.offsetHeight);
+    }
+
+    handleResize();
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return { scrollBarMaxHeight, scrollBarContainer };
+}
+
+export { useCustomSimpleBar };
diff --git a/src/components/CustomSimpleBar/index.tsx b/src/components/CustomSimpleBar/index.tsx
index 596546d..84c5f46 100644
--- a/src/components/CustomSimpleBar/index.tsx
+++ b/src/components/CustomSimpleBar/index.tsx
@@ -1,11 +1,16 @@
 import 'simplebar-react/dist/simplebar.min.css';
+import { useCustomSimpleBar } from './hook';
 import * as S from './styles';
 import { CustomSimpleBarProps } from './types';
 
 export function CustomSimpleBar({ children }: CustomSimpleBarProps) {
+  const { scrollBarContainer, scrollBarMaxHeight } = useCustomSimpleBar();
+
   return (
-    <S.Container>
-      <S.Wrapper>{children}</S.Wrapper>
+    <S.Container ref={scrollBarContainer}>
+      <S.Wrapper style={{ maxHeight: scrollBarMaxHeight }}>
+        {children}
+      </S.Wrapper>
     </S.Container>
   );
 }
diff --git a/src/components/CustomSimpleBar/styles.ts b/src/components/CustomSimpleBar/styles.ts
index 971834a..85762d2 100644
--- a/src/components/CustomSimpleBar/styles.ts
+++ b/src/components/CustomSimpleBar/styles.ts
@@ -1,11 +1,11 @@
 import SimpleBar from 'simplebar-react';
 import { styled } from 'styled-components';
 
-import { BREAKPOINTS } from '../../styles/breakpoints';
 
 const Container = styled.div`
   position: relative;
   width: 100%;
+  height: 100%;
   flex-grow: 1;
   overflow: hidden;
 `;
@@ -15,7 +15,6 @@ const Wrapper = styled(SimpleBar)`
   top: 0;
   left: 0;
   width: 100%;
-  height: 100%;
 
   .simplebar-scrollbar::before {
     background-color: ${({ theme }) => theme.GRAY_800};
@@ -37,14 +36,6 @@ const Wrapper = styled(SimpleBar)`
       height: 6rem;
     }
   }
-
-  @media only screen and (max-width: ${BREAKPOINTS.SMALL}) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
 `;
 
 export { Container, Wrapper };
diff --git a/src/pages/History/styles.ts b/src/pages/History/styles.ts
index 5a86ba6..4cc81f0 100644
--- a/src/pages/History/styles.ts
+++ b/src/pages/History/styles.ts
@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 
+import { Wrapper as SimpleBar } from '../../components/CustomSimpleBar/styles';
 import { TaskStatusProps } from './types';
 import { statusColors } from './utils';
 
@@ -23,6 +24,10 @@ const Container = styled.div`
   max-width: 932rem;
 
   &:has(${TBody}:empty) {
+    ${SimpleBar} {
+      height: 100%;
+    }
+
     .simplebar-content-wrapper {
       overflow: hidden;
       background-color: ${({ theme }) => theme.BLACK_700};
@@ -116,7 +121,7 @@ const TaskStatus = styled.td<TaskStatusProps>`
     display: block;
     border-radius: 50%;
     background-color: ${({ theme, situation }) =>
-      theme[statusColors[situation]]};
+    theme[statusColors[situation]]};
   }
 `;