add: expand function for mobile screen

packages/ui/src/components/molecule/comment/comment.svelte

@@ -7,11 +7,13 @@
   let filledStars = $derived(Math.floor(rating)) // Number of fully filled stars
   let hasHalfStar = $derived(rating % 1 !== 0) // Determine if there's a half star
   let emptyStars = $derived(totalStars - filledStars - (hasHalfStar ? 1 : 0))
+  let isExpanded = $state(false)
 </script>
 
 <div
   class="h-[320px] w-full lg:h-auto border border-surface-container px-6 py-5 lg:py-10 lg:px-12 box-border rounded-xl flex flex-col gap-y-4
   lg:gap-y-8 overflow-hidden"
+  class:h-auto={isExpanded}
 >
   <div class="flex flex-row gap-x-6">
     <div class="font-bold text-h3 text-primary">
@@ -50,11 +52,32 @@
       {semester}
     </div>
   </div>
-  <p
-    class="w-full h-auto self-center text-body1 font-sarabun font-regular text-on-surface overflow-hidden line-clamp-6 lg:line-clamp-none"
+
+  <div
+    class="h-[200px] lg:h-auto relative overflow-hidden"
+    class:h-fit={isExpanded}
+    class:overflow-visible={isExpanded}
   >
-    {content}
-  </p>
+    <p
+      class="w-full h-auto self-center text-body1 font-sarabun font-regular text-on-surface"
+    >
+      {content}
+    </p>
+
+    <!-- Button to toggle view -->
+    <button
+      class="absolute bottom-0 right-0 underline text-button1 text-primary lg:hidden pb-1 pt-1 pl-2 bg-surface
+"
+      onclick={() => (isExpanded = !isExpanded)}
+    >
+      {#if isExpanded}
+        ดูน้อยลง
+      {:else}
+        ดูเพ่ิมเติม
+      {/if}
+    </button>
+  </div>
+
   <div class="gap-6 flex flex-row text-subtitle font-sans">
     <div class="flex flex-row font-medium gap-x-2">
       <ThumbsUp class="text-neutral-400" />