Handle short desktop browser windows, by allowing vertical pane scrol…

…ling
mileswwatkins · Nov 3, 2024 · 2324c52 · 2324c52
1 parent afb8f96
commit 2324c52
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 8 deletions.
diff --git a/src/App.css b/src/App.css
@@ -4,16 +4,15 @@
 }
 
 .FilterPane {
-  padding-top: 1rem;
   flex-basis: 30%;
   min-width: 320px;
-  padding-left: 1.5rem;
-  padding-right: 1rem;
-  padding-bottom: 1.5rem;
+  padding: 1.5rem;
   display: flex;
   flex-direction: column;
+  gap: 4rem;
   justify-content: space-between;
   background-color: #faf3ce;
+  overflow-y: scroll;
 }
 
 a {

diff --git a/src/components/Filters.css b/src/components/Filters.css
@@ -1,6 +1,5 @@
-.Filters-Reset {
+.Filter-Reset {
   margin: 0;
-  margin-bottom: 1.5rem;
   font-size: 1rem;
 }
 

diff --git a/src/components/Filters.js b/src/components/Filters.js
@@ -32,7 +32,7 @@ const Filters = ({
   const afterDateMax = sub(beforeDate || beforeDateMax, { days: 1 });
 
   return (
-    <section className="Filters">
+    <section>
       <form onSubmit={(e) => e.preventDefault()}>
         <div className="Filter-Text">
           I'd like to{" "}
@@ -139,7 +139,7 @@ const Filters = ({
         </div>
         <input
           type="reset"
-          className="Filters-Reset"
+          className="Filter-Reset"
           value="Reset filters"
           onClick={onReset}
         ></input>