Define minimum widths and heights

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

@@ -11,15 +11,12 @@ type QuestionListProps = {
 const QuestionList: FC<QuestionListProps> = ({ questions, onDeleteClick }) => (
   <ul
     role="list"
-    className={
-      'flex flex-col min-h-min max-w-lg overflow-y-scroll divide-y divide-gray-100 mt-4 ' +
-      styles['scrollbox-shadows']
-    }
+    className={`flex flex-col min-h-min max-w-lg overflow-y-scroll divide-y divide-gray-100 mt-4 min-w-[24rem] ${styles['scrollbox-shadows']}`}
   >
     {questions.map((question: QuestionRecord) => (
       <li
         key={question.id}
-        className="flex flex-row items-center justify-between gap-x-6 py-5 px-4 "
+        className="flex flex-row items-center justify-between gap-x-6 py-5 px-4"
       >
         <p className="text-base font-semibold leading-6 text-gray-900">{question.content}</p>
         <TrashIcon className="shrink-0 h-6 w-6 cursor-pointer" type='button' onClick={() => onDeleteClick(question.id)} />

daily-thought-frontend/src/pages/questions.tsx

@@ -67,6 +67,7 @@ const Questions = () => {
 
   const onQuestionDelete = async (questionId: string): Promise<void> => {
     await deleteQuestion(questionId);
+    setStatusMessage(undefined);
     setRehydrateQuestions(true);
   };
 
@@ -86,7 +87,7 @@ const Questions = () => {
       />
 
       {/* List of Questions */}
-      <div className="flex flex-col items-center w-full shadow-lg min-h-32 pb-4 overflow-auto">
+      <div className="flex flex-col items-center w-full shadow-lg h-full pb-4 overflow-auto">
         <h2 className="text-xl font-semibold leading-10 pt-4 text-gray-900">Questions Stored</h2>
         {questions === undefined ? <p>Loading</p> : <QuestionList questions={questions} onDeleteClick={onQuestionDelete}/>}
       </div>