Update comment component

components/ui/Code.tsx

@@ -19,9 +19,9 @@ export function Code({children}: { children: ReactNode }) {
     return (
         <pre className="relative group" ref={preRef}>
                 <button
-                    className="absolute top-0 right-0 m-5 text-zinc-400"
+                    className="absolute top-0 right-0 m-5 text-zinc-400 rounded-lg hover:bg-[#121212] p-2"
                     onClick={handleCopy} aria-label={`${!copied ? 'Copy this code' : 'Copied!'}`}>
-                    <div className="relative size-6">
+                    <div className="relative size-5">
                         <CheckIcon
                             className={clsx('absolute text-green-500 ease-in transform transition', !copied ? 'scale-0' : 'scale-100')}/>
                         <CopyIcon

components/ui/Comments.tsx

@@ -185,8 +185,10 @@ Comments.Form = function Form({slug}: { slug: string }) {
                             />
                         <input type="hidden" name="parent_id" value={parentId ?? ''}/>
                         <input type="hidden" name="slug" value={slug}/>
-                        <div className="mt-2 flex justify-between items-center gap-x-4">
+                        <div className={clsx('mt-2 flex justify-end items-center gap-x-4', session && 'justify-between')}>
+                            {session &&
                                 <p className="text-sm text-zinc-600 dark:text-zinc-400">{`${commentFormContext?.commentLength} / ${commentFormContext?.commentMaxLength}`}</p>
+                            }
                             <div className="flex gap-x-4">
                                 {commentFormContext?.replyTo &&
                                     <button