From b26fc83be708a1f74957cd637e2a9cedb9e25abd Mon Sep 17 00:00:00 2001
From: Felipe D'Abrantes <felidabrantes@gmail>
Date: Sat, 22 Apr 2023 02:12:53 +0100
Subject: [PATCH] Use a more responsive design
---
.../src/components/questions/NewQuestionForm.tsx | 6 ++++--
.../src/components/questions/QuestionList.tsx | 2 +-
2 files changed, 5 insertions(+), 3 deletions(-)
diff --git a/daily-thought-frontend/src/components/questions/NewQuestionForm.tsx b/daily-thought-frontend/src/components/questions/NewQuestionForm.tsx
index faf0b9e2..002a3100 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 06e75722..2701c1f0 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
--
GitLab