From 9658c95523506274f88a009c7f7f5fa5b3447ea3 Mon Sep 17 00:00:00 2001
From: Jeff Sieu <jeffsy00@gmail.com>
Date: Sat, 8 Oct 2022 21:48:52 +0800
Subject: [PATCH] [questions][ui] add vertical scrolling

---
 .../portal/src/components/global/AppShell.tsx |  2 +-
 .../questions/ContributeQuestionCard.tsx      |  2 +-
 .../questions/card/QuestionCard.tsx           |  2 +-
 apps/portal/src/pages/questions/index.tsx     | 32 +++++++++++--------
 4 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/apps/portal/src/components/global/AppShell.tsx b/apps/portal/src/components/global/AppShell.tsx
index eeb2dfc9..0275dbb5 100644
--- a/apps/portal/src/components/global/AppShell.tsx
+++ b/apps/portal/src/components/global/AppShell.tsx
@@ -175,7 +175,7 @@ export default function AppShell({ children }: Props) {
       />
 
       {/* Content area */}
-      <div className="flex flex-1 flex-col overflow-hidden">
+      <div className="flex h-screen flex-1 flex-col overflow-hidden">
         <header className="w-full">
           <div className="relative z-10 flex h-16 flex-shrink-0 border-b border-gray-200 bg-white shadow-sm">
             <button
diff --git a/apps/portal/src/components/questions/ContributeQuestionCard.tsx b/apps/portal/src/components/questions/ContributeQuestionCard.tsx
index 33769153..ff492fb7 100644
--- a/apps/portal/src/components/questions/ContributeQuestionCard.tsx
+++ b/apps/portal/src/components/questions/ContributeQuestionCard.tsx
@@ -22,7 +22,7 @@ export default function ContributeQuestionCard() {
 
   return (
     <>
-      <div className="flex flex-col items-stretch justify-center gap-2 rounded-md border border-slate-300 p-4">
+      <div className="flex flex-col items-stretch justify-center gap-2 rounded-md border border-slate-300 bg-white p-4">
         <TextInput
           isLabelHidden={true}
           label="Question"
diff --git a/apps/portal/src/components/questions/card/QuestionCard.tsx b/apps/portal/src/components/questions/card/QuestionCard.tsx
index 821bfd28..6b5c3ede 100644
--- a/apps/portal/src/components/questions/card/QuestionCard.tsx
+++ b/apps/portal/src/components/questions/card/QuestionCard.tsx
@@ -63,7 +63,7 @@ export default function QuestionCard({
   location,
 }: QuestionCardProps) {
   return (
-    <article className="flex gap-2 rounded-md border border-slate-300 p-4">
+    <article className="flex gap-4 rounded-md border border-slate-300 p-4 bg-white">
       {showVoteButtons && (
         <div className="flex flex-col items-center">
           <Button
diff --git a/apps/portal/src/pages/questions/index.tsx b/apps/portal/src/pages/questions/index.tsx
index c80af96c..5bebfa4e 100644
--- a/apps/portal/src/pages/questions/index.tsx
+++ b/apps/portal/src/pages/questions/index.tsx
@@ -134,7 +134,7 @@ export default function QuestionsHomePage() {
   ) : (
     <main className="flex flex-1 flex-col items-stretch overflow-y-auto">
       <div className="flex pt-4">
-        <section className="w-[300px] border-r px-4">
+        <aside className="w-[300px] border-r px-4">
           <h2 className="text-xl font-semibold">Filter by</h2>
           <div className="divide-y divide-slate-200">
             <FilterSection
@@ -189,9 +189,9 @@ export default function QuestionsHomePage() {
               }}
             />
           </div>
-        </section>
-        <div className="flex flex-1 justify-center">
-          <div className="flex max-w-3xl flex-1 gap-x-4">
+        </aside>
+        <section className="flex min-h-0 flex-1 flex-col items-center overflow-auto pt-4">
+          <div className="flex min-h-0 max-w-3xl flex-1 gap-x-4">
             <div className="flex flex-1 flex-col items-stretch justify-start gap-4">
               <ContributeQuestionCard />
               <QuestionSearchBar
@@ -207,18 +207,22 @@ export default function QuestionsHomePage() {
                 ]}
                 sortValue="most-recent"
               />
-              <QuestionOverviewCard
-                answerCount={0}
-                content="Given an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums and"
-                location="Menlo Park, CA"
-                role="Senior Engineering Manager"
-                similarCount={0}
-                timestamp="Last month"
-                upvoteCount={0}
-              />
+              {Array.from({ length: 10 }).map((_, index) => (
+                <QuestionOverviewCard
+                  // eslint-disable-next-line react/no-array-index-key
+                  key={index}
+                  answerCount={0}
+                  content="Given an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums and"
+                  location="Menlo Park, CA"
+                  role="Senior Engineering Manager"
+                  similarCount={0}
+                  timestamp="Last month"
+                  upvoteCount={0}
+                />
+              ))}
             </div>
           </div>
-        </div>
+        </section>
       </div>
     </main>
   );