fix style

src/lib/components/Button.svelte

@@ -11,16 +11,16 @@
   export let iconPosition: "left" | "right" = "left";
   export let disabled: boolean = false;
   export let loading: boolean = false;
-  export let onClick: () => void = () => {};
+  export let onClick: (e?: any) => void = (e) => {};
 
-  const handleClick = async () => {
+  const handleClick = async (e: any) => {
     if (href) {
       if (target) window.open(href, target);
       else goto(href);
       return
     }
     if (disabled || loading) return;
-    onClick();
+    onClick(e);
   };
 
 </script>

src/lib/components/community/drawer/Comments.svelte

@@ -45,10 +45,14 @@
     <Comment comment={comment} />
   {/each}
   {#if comments?.length > 1}
-    <div class="flex items-center justify-start max-w-max absolute right-8 top-8">
+    <div class="flex items-center justify-start max-w-max absolute right-8 top-8 pointer-events-auto z-[10]">
       <Button
         theme="dark"
-        onClick={() => collapse_comments = !collapse_comments}
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          collapse_comments = !collapse_comments;
+        }}
       >
         {collapse_comments ? "Show less" : `Show more (${comments?.length - 1})`}
       </Button>

src/lib/components/community/drawer/Drawer.svelte

@@ -116,7 +116,7 @@
             </div>
           </main>
         </div>
-        <footer class="p-8 border-t border-neutral-900 bg-neutral-900/30 flex flex-col justify-between relative">
+        <footer class="p-8 border-t border-neutral-900 bg-neutral-900/30 flex flex-col justify-between relative max-h-[80%] overflow-auto">
           <p class="font-semibold text-neutral-100 text-base lg:text-lg mb-6">
             Comment{(gallery?.comments?.length ?? 0) > 1 ? 's' : ''} ({gallery?.comments?.length ?? 0})
           </p>

src/lib/components/models/drawer/Drawer.svelte

@@ -150,7 +150,7 @@
           {/if}
         </main>
       </div>
-      <footer class="p-8 border-t border-neutral-900 bg-neutral-900/30 flex flex-col justify-between relative">
+      <footer class="p-8 border-t border-neutral-900 bg-neutral-900/30 flex flex-col justify-between relative max-h-[80%] overflow-auto">
         <p class="font-semibold text-neutral-100 text-base lg:text-lg mb-6">
           Comment{(model?.comments?.length ?? 0) > 1 ? 's' : ''} ({model?.comments?.length ?? 0})
         </p>

src/lib/components/models/drawer/comments/Comments.svelte

@@ -45,10 +45,14 @@
     <Comment comment={comment} />
   {/each}
   {#if comments?.length > 1}
-    <div class="flex items-center justify-start max-w-max absolute right-8 top-8">
+    <div class="flex items-center justify-start max-w-max absolute right-8 top-8 pointer-events-auto z-10">
       <Button
         theme="dark"
-        onClick={() => collapse_comments = !collapse_comments}
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          collapse_comments = !collapse_comments;
+        }}
       >
         {collapse_comments ? "Show less" : `Show more (${comments?.length - 1})`}
       </Button>