fix: height changes when going back or next in the community reviews (#6

)

Merge pull request #6 from onesoft-sudo/fix/review-height-changing

src/components/Home/Review.tsx

@@ -20,14 +20,15 @@
 import type { APIReview } from "@/types/APIReview";
 import { Progress } from "@nextui-org/react";
 import { FC } from "react";
+import styles from '../../styles/Review.module.css';
 
 interface ReviewProps {
     review: APIReview;
 }
 
 const Review: FC<ReviewProps> = ({ review }) => {
     return (
-        <div className="p-2 text-center w-[100%] block">
+        <div className={`p-2 text-center w-[100%] block h-[200px] max-h-[200px] overflow-y-scroll ${styles.review}`}>
             <h3 className="font-bold text-xl lg:text-2xl">
                 {review.reviewer ?? "Anonymous"}
             </h3>
@@ -54,8 +55,8 @@ const Review: FC<ReviewProps> = ({ review }) => {
                 />
             </div>
             <div className="pt-3">
-                <blockquote className=" text-[#999] text-center">
-                    &ldquo;{review.content}&rdquo;
+                <blockquote className="text-[#999] text-center">
+                    &ldquo;{review.content.trim().split('\n').map((str, index, array) => <>{str}{array.length - 1 > index && <br />}</>)}&rdquo;
                 </blockquote>
             </div>
         </div>

src/styles/Review.module.css

@@ -0,0 +1,13 @@
+.review::-webkit-scrollbar {
+    width: 5px;
+}
+
+.review::-webkit-scrollbar-thumb {
+    background: #555;
+    border-radius: 5px;
+}
+
+.review {
+    scrollbar-width: 5px;
+    -ms-overflow-style: none;
+}