From 3b9dd2b9eb2fae85f891bbd76b655eafb7c68709 Mon Sep 17 00:00:00 2001
From: Joshua Kelechi <58009744+jaykayudo@users.noreply.github.com>
Date: Fri, 11 Oct 2024 08:46:07 +0100
Subject: [PATCH] feat: update questions list display (#3902)

---
 src/pages/Question/QuestionListItem.tsx | 13 +++++++++----
 src/pages/Question/QuestionListing.tsx  | 12 +++++++++++-
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/pages/Question/QuestionListItem.tsx b/src/pages/Question/QuestionListItem.tsx
index 3898065995..cfd5c9d503 100644
--- a/src/pages/Question/QuestionListItem.tsx
+++ b/src/pages/Question/QuestionListItem.tsx
@@ -38,8 +38,12 @@ export const QuestionListItem = ({ question, query }: IProps) => {
       as="li"
       data-cy="question-list-item"
       data-id={question._id}
-      mb={3}
-      style={{ position: 'relative' }}
+      sx={{
+        position: 'relative',
+        border: 'none',
+        borderBottom: '2px solid #cccccc',
+        borderRadius: 0,
+      }}
     >
       <Flex
         sx={{
@@ -51,7 +55,8 @@ export const QuestionListItem = ({ question, query }: IProps) => {
           sx={{
             flexDirection: 'column',
             gap: 1,
-            padding: 3,
+            paddingX: 3,
+            paddingY: 2,
           }}
         >
           <Flex sx={{ gap: 2, flexWrap: 'wrap' }}>
@@ -66,7 +71,7 @@ export const QuestionListItem = ({ question, query }: IProps) => {
               sx={{
                 color: 'black',
                 fontSize: [3, 3, 4],
-                marginBottom: 1,
+                marginBottom: 0.5,
               }}
             >
               <InternalLink
diff --git a/src/pages/Question/QuestionListing.tsx b/src/pages/Question/QuestionListing.tsx
index 0877fa61a5..e52c7e7946 100644
--- a/src/pages/Question/QuestionListing.tsx
+++ b/src/pages/Question/QuestionListing.tsx
@@ -125,7 +125,17 @@ export const QuestionListing = () => {
       )}
 
       {questions && questions.length > 0 && (
-        <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
+        <ul
+          style={{
+            listStyle: 'none',
+            padding: 0,
+            margin: 0,
+            marginBottom: 5,
+            border: '2px solid black',
+            borderRadius: 5,
+            overflowX: 'hidden',
+          }}
+        >
           {questions.map((question, index) => (
             <QuestionListItem key={index} question={question} query={q} />
           ))}