From 09d84eeae848a15f64aa35bf8eea94b9a2dc8c43 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <256895@studenti.unimore.it>
Date: Sat, 24 Apr 2021 00:27:35 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Complete=20BoxFullScrollable=20!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/BoxFullScrollable.js       | 13 +++++------
 .../components/BoxFullScrollable.module.css   | 22 +++++++++++++++++--
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/code/frontend/src/components/BoxFullScrollable.js b/code/frontend/src/components/BoxFullScrollable.js
index 6fad196..0db871d 100644
--- a/code/frontend/src/components/BoxFullScrollable.js
+++ b/code/frontend/src/components/BoxFullScrollable.js
@@ -11,19 +11,16 @@ import BoxFull from "./BoxFull"
  *
  * @param children - The contents of the box body.
  * @param childrenClassName - Additional class(es) added to the inner `<div>` acting as the body.
- * @param height - The fixed height of the box body.
  * @param props - Additional props to pass to the box.
  * @returns {JSX.Element}
  * @constructor
  */
-export default function BoxFullScrollable({ children, childrenClassName, height, ...props }) {
+export default function BoxFullScrollable({ children, childrenClassName, ...props }) {
     return (
-        <BoxFull
-            childrenClassName={classNames(Style.ScrollableBody, childrenClassName)}
-            childrenProps={{"style": {"height": height}}}
-            {...props}
-        >
-            {children}
+        <BoxFull childrenClassName={classNames(Style.BoxScrollableBody, childrenClassName)} {...props}>
+            <div className={classNames(Style.ScrollContainer)}>
+                {children}
+            </div>
         </BoxFull>
     )
 }
diff --git a/code/frontend/src/components/BoxFullScrollable.module.css b/code/frontend/src/components/BoxFullScrollable.module.css
index e2a4b01..038fa5b 100644
--- a/code/frontend/src/components/BoxFullScrollable.module.css
+++ b/code/frontend/src/components/BoxFullScrollable.module.css
@@ -1,5 +1,23 @@
-.ScrollableBody {
-    flex-grow: 0;
+.BoxScrollableBody {
+    position: relative;
+
+    border-bottom-right-radius: 0;
+}
+
+
+.ScrollContainer {
+    position: absolute;
+
+    padding: 10px 40px;
+
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
 
     overflow-y: scroll;
+
+    /* Custom scrollbar (firefox only!) */
+    scrollbar-color: var(--bg-light) var(--bg-dark);
+    scrollbar-width: auto;
 }