Merge pull request #65 from SJSUCSClub/64-bug-max-height-for-filters-…

…sidebar [Bug] Max height for filters
SJSUCSClub · Sep 27, 2024 · d62f251 · d62f251
2 parents 01e71a0 + 34aa2bd
commit d62f251
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 12 deletions.
diff --git a/app/(main)/courses/[id]/@reviews/page.tsx b/app/(main)/courses/[id]/@reviews/page.tsx
@@ -60,9 +60,9 @@ export default function Page({ params }: { params: { id: string } }) {
   const results = data ? data[0] : null;
   const items = data ? data.flatMap((d) => d.items) : [];
   return (
-    <section className="mx-auto flex w-full max-w-content-width items-stretch gap-md px-md pb-lg">
+    <section className="mx-auto flex w-full max-w-content-width items-stretch gap-md px-md">
       <div className="w-[250px] max-lg:hidden">
-        <div className="sticky top-0 flex min-h-[50dvh] w-full flex-col gap-sm pt-lg">
+        <div className="sticky top-0 flex max-h-[100dvh] min-h-[50dvh] w-full flex-col gap-sm overflow-y-auto pb-lg pt-lg">
           <p className="pb-md">Filters</p>
           <p className="pb-sm text-small-lg">Limit</p>
           <FilterGroup
@@ -86,7 +86,7 @@ export default function Page({ params }: { params: { id: string } }) {
         </div>
       </div>
       <SessionProvider>
-        <div className="flex flex-1 flex-col items-stretch gap-md pt-lg">
+        <div className="flex flex-1 flex-col items-stretch gap-md pb-lg pt-lg">
           <p id="reviews">{results?.total_results ?? '-'} Review(s)</p>
           {isLoading || isValidating ? <Skeleton /> : null}
           {!isLoading && !isValidating

diff --git a/app/(main)/courses/search/page.tsx b/app/(main)/courses/search/page.tsx
@@ -35,9 +35,9 @@ export default async function Page({
       <div className="mx-auto w-full max-w-content-width px-md py-lg">
         <p>Search results for &quot;{searchParams.query}&quot;</p>
       </div>
-      <section className="mx-auto flex w-full max-w-content-width items-stretch gap-md px-md pb-lg">
+      <section className="mx-auto flex w-full max-w-content-width items-stretch gap-md px-md">
         <div className="w-[250px] max-lg:hidden">
-          <div className="sticky top-0 flex min-h-[50dvh] w-full flex-col gap-sm pt-lg">
+          <div className="sticky top-0 flex max-h-[100dvh] min-h-[50dvh] w-full flex-col gap-sm overflow-y-auto pb-lg pt-lg">
             <p className="pb-md">Filters</p>
             <p className="pb-sm text-small-lg">Limit</p>
             <FilterGroup
@@ -78,7 +78,7 @@ export default async function Page({
             </LinkBtn>
           </div>
         </div>
-        <div className="flex flex-1 flex-col items-stretch gap-md pt-lg">
+        <div className="flex flex-1 flex-col items-stretch gap-md pb-lg pt-lg">
           <p>{total_results ?? '-'} Courses(s)</p>
 
           {items && total_results > 0 ? (

diff --git a/app/(main)/professors/[id]/@reviews/page.tsx b/app/(main)/professors/[id]/@reviews/page.tsx
@@ -61,9 +61,9 @@ export default function Page({ params }: { params: { id: string } }) {
   const results = data ? data[0] : null;
   const items = data ? data.flatMap((d) => d.items) : [];
   return (
-    <section className="mx-auto flex w-full max-w-content-width items-stretch gap-md px-md pb-lg">
+    <section className="mx-auto flex w-full max-w-content-width items-stretch gap-md px-md">
       <div className="w-[250px] max-lg:hidden">
-        <div className="sticky top-0 flex min-h-[50dvh] w-full flex-col gap-sm pt-lg">
+        <div className="sticky top-0 flex max-h-[100dvh] min-h-[50dvh] w-full flex-col gap-sm overflow-y-auto pb-lg pt-lg">
           <p className="pb-md">Filters</p>
           <p className="pb-sm text-small-lg">Limit</p>
           <FilterGroup
@@ -87,7 +87,7 @@ export default function Page({ params }: { params: { id: string } }) {
         </div>
       </div>
       <SessionProvider>
-        <div className="flex flex-1 flex-col items-stretch gap-md pt-lg">
+        <div className="flex flex-1 flex-col items-stretch gap-md pb-lg pt-lg">
           <p id="reviews">{results?.total_results ?? '-'} Review(s)</p>
           <form action="/professors/review" className="flex gap-sm">
             <input type="hidden" name="professor_id" value={params.id} />

diff --git a/app/(main)/professors/search/page.tsx b/app/(main)/professors/search/page.tsx
@@ -23,9 +23,9 @@ export default async function Page({
       <div className="mx-auto w-full max-w-content-width px-md py-lg">
         <p>Search results for &quot;{searchParams.query}&quot;</p>
       </div>
-      <section className="mx-auto flex w-full max-w-content-width items-stretch gap-md px-md pb-lg">
+      <section className="mx-auto flex w-full max-w-content-width items-stretch gap-md px-md">
         <div className="w-[250px] max-lg:hidden">
-          <div className="sticky top-0 flex min-h-[50dvh] w-full flex-col gap-sm pt-lg">
+          <div className="sticky top-0 flex max-h-[100dvh] min-h-[50dvh] w-full flex-col gap-sm overflow-y-auto pb-lg pt-lg">
             <p className="pb-md">Filters</p>
             <p className="pb-sm text-small-lg">Limit</p>
             <FilterGroup
@@ -35,7 +35,7 @@ export default async function Page({
             />
           </div>
         </div>
-        <div className="flex flex-1 flex-col items-stretch gap-md pt-lg">
+        <div className="flex flex-1 flex-col items-stretch gap-md pb-lg pt-lg">
           <p>{total_results ?? '-'} Professor(s)</p>
 
           {items && total_results > 0 ? (