Feature(reviews): parse reviews with markdown, make sure paragraphs are shown

public/css/index-tailwind-output.css

@@ -5723,6 +5723,11 @@ svg.apply-fill path {
   height: calc(2.5rem - 1px);
 }
 
+.in-markdown p, .in-markdown ol, .in-markdown ul {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
 @media (min-width: 640px) {
   .compass_arrow {
     width: calc(2.75rem - 1px);
@@ -8577,6 +8582,10 @@ svg.apply-fill path {
     display: none;
   }
 
+  .md\:h-6 {
+    height: 1.5rem;
+  }
+
   .md\:h-64 {
     height: 16rem;
   }
@@ -8637,6 +8646,10 @@ svg.apply-fill path {
     width: 12rem;
   }
 
+  .md\:w-6 {
+    width: 1.5rem;
+  }
+
   .md\:w-6\/12 {
     width: 50%;
   }

src/UI/Base/Markdown.svelte

@@ -14,5 +14,7 @@
 </script>
 
 {#if src?.length > 0}
-  {@html marked.parse(src)}
+  <div class="in-markdown">
+    {@html marked.parse(src)}
+  </div>
 {/if}

src/UI/Reviews/SingleReview.svelte

@@ -6,6 +6,8 @@
   import Tr from "../Base/Tr.svelte"
   import { ariaLabel } from "../../Utils/ariaLabel"
   import ThemeViewState from "../../Models/ThemeViewState"
+  import Markdown from "../Base/Markdown.svelte"
+  import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
 
   export let state: ThemeViewState = undefined
   export let review: Review & {
@@ -43,6 +45,7 @@
       <h3>{sub}</h3>
     </button>
   {/if}
+
   <div class="flex w-full items-center justify-between">
     <div
       tabindex="0"
@@ -50,7 +53,7 @@
         n: "" + Math.round(review.rating / 10) / 2,
       })}
     >
-      <StarsBar readonly={true} score={review.rating} />
+      <StarsBar starSize="w-4 h-4 md:w-6 md:h-6" readonly={true} score={review.rating} />
     </div>
     <div class="flex flex-wrap space-x-2">
       <a
@@ -66,22 +69,23 @@
           </span>
         {/if}
       </a>
-      <span class="subtle">
-        {date}
-      </span>
-    </div>
-  </div>
-  {#if review.opinion}
-    <div class="link-no-underline">
       <a
+        class="subtle"
         target="_blank"
         rel="noopener nofollow"
         href={`https://mangrove.reviews/list?signature=${encodeURIComponent(review.signature)}`}
       >
-        {review.opinion}
+        {date}
       </a>
     </div>
+  </div>
+
+  {#if review.opinion}
+    <div class="disable-links">
+    <Markdown src= {review.opinion}/>
+    </div>
   {/if}
+
   {#if review.metadata.is_affiliated}
     <Tr t={Translations.t.reviews.affiliated_reviewer_warning} />
   {/if}

src/index.css

@@ -617,6 +617,11 @@ svg.apply-fill path {
     height: calc(2.5rem - 1px);
 }
 
+.in-markdown p, .in-markdown ol, .in-markdown ul {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+}
+
 @media (min-width: 640px) {
     .compass_arrow {
         width: calc(2.75rem - 1px);