From a73217fd7f614709d30f3b2f9bbea35a4c7e2597 Mon Sep 17 00:00:00 2001 From: Felipe D'Abrantes <felidabrantes@gmail> Date: Sat, 22 Apr 2023 01:47:06 +0100 Subject: [PATCH] Define minimum widths and heights --- .../src/components/questions/QuestionList.tsx | 7 ++----- daily-thought-frontend/src/pages/questions.tsx | 3 ++- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/daily-thought-frontend/src/components/questions/QuestionList.tsx b/daily-thought-frontend/src/components/questions/QuestionList.tsx index e4a38427..06e75722 100644 --- a/daily-thought-frontend/src/components/questions/QuestionList.tsx +++ b/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)} /> diff --git a/daily-thought-frontend/src/pages/questions.tsx b/daily-thought-frontend/src/pages/questions.tsx index 5848ae48..57b6c06a 100644 --- a/daily-thought-frontend/src/pages/questions.tsx +++ b/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> -- GitLab