[questions][ui] add vertical scrolling

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

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"

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

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>
+        </aside>
-        <div className="flex flex-1 justify-center">
+        <section className="flex min-h-0 flex-1 flex-col items-center overflow-auto pt-4">
-          <div className="flex max-w-3xl flex-1 gap-x-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,7 +207,10 @@ export default function QuestionsHomePage() {
                 ]}
                 sortValue="most-recent"
               />
+              {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"
@@ -216,9 +219,10 @@ export default function QuestionsHomePage() {
                   timestamp="Last month"
                   upvoteCount={0}
                 />
+              ))}
             </div>
           </div>
-        </div>
+        </section>
       </div>
     </main>
   );