diff --git a/daily-thought-frontend/src/components/questions/NewQuestionForm.tsx b/daily-thought-frontend/src/components/questions/NewQuestionForm.tsx index faf0b9e22edfdfa3b9f9be7978ee095369bf0f31..002a3100179a55fe06e95858f838c4f2f8ac069a 100644 --- a/daily-thought-frontend/src/components/questions/NewQuestionForm.tsx +++ b/daily-thought-frontend/src/components/questions/NewQuestionForm.tsx @@ -37,14 +37,16 @@ const NewQuestionForm: FC<NewQuestionFormProps> = ({ </p> {/* Question Form */} - <form className="flex flex-col align-center items-center pt-8 w-3/5" onSubmit={onFormSubmit}> + <form className="flex flex-col align-center items-center pt-8 w-4/5 md:3/5" onSubmit={onFormSubmit}> {/* Text Input */} <input type="text" name="new-question" id="new-question" placeholder="A new exciting question..." - className="block w-1/2 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" + className="block rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 + ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset + focus:ring-indigo-600 sm:text-sm sm:leading-6 w-80 md:w-3/5 lg:w-1/2" value={newQuestion} onChange={(e) => setNewQuestion(e.target.value)} /> diff --git a/daily-thought-frontend/src/components/questions/QuestionList.tsx b/daily-thought-frontend/src/components/questions/QuestionList.tsx index 06e75722b112986dd31a9c6a30a71b8220e9f4a7..2701c1f03cffccda1ae90e73f20dea20c7582aa2 100644 --- a/daily-thought-frontend/src/components/questions/QuestionList.tsx +++ b/daily-thought-frontend/src/components/questions/QuestionList.tsx @@ -11,7 +11,7 @@ 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 min-w-[24rem] ${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-[16rem] sm:min-w-[24rem] ${styles['scrollbox-shadows']}`} > {questions.map((question: QuestionRecord) => ( <li