fix: drawer should only be render on mobile

Author: grv-saini-20

platforms/metagram/src/lib/fragments/Comment/Comment.svelte

@@ -69,9 +69,7 @@
 			/>
 		</button>
 		<span class="bg-black-600 inline-block h-1 w-1 rounded-full"></span>
-		<button onclick={handleReply} class="text-black-600 font-semibold"
-			>Reply</button
-		>
+		<button onclick={handleReply} class="text-black-600 font-semibold">Reply</button>
 		<span class="bg-black-600 inline-block h-1 w-1 rounded-full"></span>
 		<p class="text-black-600">{comment.time}</p>
 	</div>

platforms/metagram/src/lib/types.ts

@@ -29,4 +29,4 @@ export type PostData = {
 		likes: number;
 		comments: number;
 	};
-};
+};

platforms/metagram/src/routes/(protected)/home/+page.svelte

@@ -6,7 +6,6 @@
 	import { Comment, MessageInput } from '$lib/fragments';
 	import type { CommentType, PostData } from '$lib/types';
 
-
 	let listElement: HTMLElement;
 	let visiblePosts: PostData[] = $state([]);
 	let maxVisiblePosts = $state(20);
@@ -96,7 +95,13 @@
 				count={post.count}
 				callback={{
 					like: () => alert('like'),
-					comment: () => drawer?.present({ animate: true }),
+					comment: () => {
+						if (window.matchMedia('(max-width: 768px)').matches) {
+							drawer?.present({ animate: true });
+						} else {
+							// comments to be shown in right aside
+						}
+					},
 					menu: () => alert('menu')
 				}}
 			/>