Add shadows to the scrollable list

daily-thought-frontend/src/components/questions/QuestionList.tsx

 import { FC } from 'react';
 import { QuestionRecord } from '@/hooks/useQuestions';
 import { TrashIcon } from '@heroicons/react/24/outline';
+import styles from '../../styles/Scrollbox.module.css';
 
 type QuestionListProps = {
   questions: QuestionRecord[];
@@ -9,7 +10,10 @@ type QuestionListProps = {
 const QuestionList: FC<QuestionListProps> = ({ questions }) => (
   <ul
     role="list"
-    className="flex flex-col min-h-min max-w-lg overflow-y-scroll divide-y divide-gray-100 "
+    className={
+      'flex flex-col min-h-min max-w-lg overflow-y-scroll divide-y divide-gray-100 mt-4 ' +
+      styles['scrollbox-shadows']
+    }
   >
     {questions.map((question: QuestionRecord) => (
       <li

daily-thought-frontend/src/styles/Scrollbox.module.css

+.scrollbox-shadows {
+  background: /* Shadow covers */
+  linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, /* Shadows */
+  radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
+  background-repeat: no-repeat;
+  background-color: white;
+  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+  background-attachment: local, local, scroll, scroll;
+}