From 75eec5c6b21e4a50db302228b0fa9c98a3010c9b Mon Sep 17 00:00:00 2001
From: Valik <valik3201@gmail.com>
Date: Sat, 10 Feb 2024 22:07:43 +0100
Subject: [PATCH] refactor: update styles and refactor Reviews component

---
 src/components/Reviews.jsx | 44 ++++++++++++++++++--------------------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/components/Reviews.jsx b/src/components/Reviews.jsx
index 528c255..c7ce9be 100644
--- a/src/components/Reviews.jsx
+++ b/src/components/Reviews.jsx
@@ -37,31 +37,29 @@ const Reviews = () => {
   return (
     <>
       {!isLoading && data.length === 0 && <AlertNoReviews />}
-      <div className="flex flex-col w-full max-w-5xl items-start gap-4 py-4">
+      <ul className="flex flex-col w-full max-w-5xl items-start gap-4 py-4">
         {data.map(review => (
-          <ul key={review.id}>
-            <li>
-              <Card>
-                <CardHeader>
-                  <CardTitle>{review.author}</CardTitle>
-                  <CardDescription>
-                    {format(new Date(review.created_at), 'HH:mm, MMMM d, yyyy')}
-                  </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  {/<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)<\/\1>/.test(
-                    review.content
-                  ) ? (
-                    <p>{parse(review.content)}</p>
-                  ) : (
-                    <ReactMarkdown>{review.content}</ReactMarkdown>
-                  )}
-                </CardContent>
-              </Card>
-            </li>
-          </ul>
+          <li key={review.id} className="min-w-full">
+            <Card>
+              <CardHeader>
+                <CardTitle>{review.author}</CardTitle>
+                <CardDescription>
+                  {format(new Date(review.created_at), 'HH:mm, MMMM d, yyyy')}
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                {/<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)<\/\1>/.test(
+                  review.content
+                ) ? (
+                  <p>{parse(review.content)}</p>
+                ) : (
+                  <ReactMarkdown>{review.content}</ReactMarkdown>
+                )}
+              </CardContent>
+            </Card>
+          </li>
         ))}
-      </div>
+      </ul>
     </>
   );
 };