From 74f248782b0905f9f3f8bdcd0861a80ee91c8734 Mon Sep 17 00:00:00 2001
From: Jeff Printy <jeff@printy.us>
Date: Mon, 4 Sep 2023 14:20:43 -0500
Subject: [PATCH] Enable scrolling in collections sidebar #118

---
 .../src/components/Sidebar/Collections/index.js |  3 +--
 .../bruno-app/src/components/Sidebar/index.js   | 17 +++++++----------
 .../src/pageComponents/Index/StyledWrapper.js   |  1 +
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/bruno-app/src/components/Sidebar/Collections/index.js b/packages/bruno-app/src/components/Sidebar/Collections/index.js
index e401174d..496f0145 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/index.js
@@ -61,7 +61,7 @@ const Collections = () => {
         />
       </div>
 
-      <div className="mt-4 flex flex-col">
+      <div className="mt-4 flex flex-col overflow-y-auto absolute top-32 bottom-10 left-0 right-0">
         {collections && collections.length
           ? collections.map((c) => {
               return (
@@ -77,4 +77,3 @@ const Collections = () => {
 };
 
 export default Collections;
-
diff --git a/packages/bruno-app/src/components/Sidebar/index.js b/packages/bruno-app/src/components/Sidebar/index.js
index 2e68b27f..bb873df1 100644
--- a/packages/bruno-app/src/components/Sidebar/index.js
+++ b/packages/bruno-app/src/components/Sidebar/index.js
@@ -15,13 +15,11 @@ const MAX_LEFT_SIDEBAR_WIDTH = 600;
 
 const Sidebar = () => {
   const leftSidebarWidth = useSelector((state) => state.app.leftSidebarWidth);
-  const [ preferencesOpen, setPreferencesOpen ] = useState(false);
+  const [preferencesOpen, setPreferencesOpen] = useState(false);
 
   const [asideWidth, setAsideWidth] = useState(leftSidebarWidth);
 
-  const {
-    storedTheme
-  } = useTheme();
+  const { storedTheme } = useTheme();
 
   const dispatch = useDispatch();
   const [dragging, setDragging] = useState(false);
@@ -76,24 +74,23 @@ const Sidebar = () => {
     setAsideWidth(leftSidebarWidth);
   }, [leftSidebarWidth]);
 
-
   return (
-    <StyledWrapper className="flex relative">
+    <StyledWrapper className="flex relative h-screen">
       <aside>
-        <div className="flex flex-row h-full w-full">
+        <div className="flex flex-row h-screen w-full">
           {preferencesOpen && <Preferences onClose={() => setPreferencesOpen(false)} />}
 
-          <div className="flex flex-col w-full" style={{width: asideWidth}}>
+          <div className="flex flex-col w-full" style={{ width: asideWidth }}>
             <div className="flex flex-col flex-grow">
               <TitleBar />
               <Collections />
             </div>
 
-            <div className="footer flex px-1 py-2 items-center cursor-pointer select-none">
+            <div className="footer flex px-1 py-2 absolute bottom-0 left-0 right-0 items-center cursor-pointer select-none">
               <div className="flex items-center ml-1 text-xs ">
                 <IconSettings size={18} strokeWidth={1.5} className="mr-2  hover:text-gray-700" onClick={() => setPreferencesOpen(true)} />
               </div>
-              <div className="pl-1" style={{position: 'relative', top: '3px'}}>
+              <div className="pl-1" style={{ position: 'relative', top: '3px' }}>
                 {storedTheme === 'dark' ? (
                   <GitHubButton
                     href="https://github.com/usebruno/bruno"
diff --git a/packages/bruno-app/src/pageComponents/Index/StyledWrapper.js b/packages/bruno-app/src/pageComponents/Index/StyledWrapper.js
index 4a70f838..741978cd 100644
--- a/packages/bruno-app/src/pageComponents/Index/StyledWrapper.js
+++ b/packages/bruno-app/src/pageComponents/Index/StyledWrapper.js
@@ -5,6 +5,7 @@ const Wrapper = styled.div`
   width: 100%;
   height: 100%;
   min-height: 100vh;
+  max-height: 100vh;
 
   &.is-dragging {
     cursor: col-resize !important;