diff --git a/src/lib/components/CommentSection.svelte b/src/lib/components/CommentSection.svelte
index d793060f..44582e02 100644
--- a/src/lib/components/CommentSection.svelte
+++ b/src/lib/components/CommentSection.svelte
@@ -400,7 +400,7 @@ const handleDownvote = async (event) => {
             {/if}
   
             {#if data?.user?.id === comment?.expand?.user?.id || data?.user?.id === moderators?.at(0).user}  
-              <label for={deleteCommentId} class="cursor-pointer text-[12.5px] font-bold text-[#8C8C8C]">
+              <label for={'delete'+deleteCommentId} class="cursor-pointer text-[12.5px] font-bold text-[#8C8C8C]">
                 Delete
               </label>
             {/if}
@@ -448,11 +448,11 @@ const handleDownvote = async (event) => {
   
   
   <!--Start Delete Modal-->
-  <input type="checkbox" id={deleteCommentId} class="modal-toggle" />
+  <input type="checkbox" id={'delete'+deleteCommentId} class="modal-toggle" />
   
-  <dialog id={deleteCommentId} class="modal modal-bottom sm:modal-middle border border-slate-800">
+  <dialog id={'delete'+deleteCommentId} class="modal modal-bottom sm:modal-middle border border-slate-800">
   
-    <label for={deleteCommentId}  class="cursor-pointer modal-backdrop  bg-[#fff] bg-opacity-[0.05]"></label>
+    <label for={'delete'+deleteCommentId}  class="cursor-pointer modal-backdrop  bg-[#fff] bg-opacity-[0.05]"></label>
   
     <div class="modal-box bg-[#202020] p-5 border border-slate-600 shadow-none" >
   
@@ -461,10 +461,10 @@ const handleDownvote = async (event) => {
           </h3>
   
           <div class="modal-action pb-4">
-            <label for={deleteCommentId} class="cursor-pointer text-sm px-3 py-3 rounded-lg m-auto text-white mr-5 bg-[#646464]">
+            <label for={'delete'+deleteCommentId} class="cursor-pointer text-sm px-3 py-3 rounded-lg m-auto text-white mr-5 bg-[#646464]">
               No, cancel
             </label>
-            <label on:click={handleDeleteComment} for={deleteCommentId} class="cursor-pointer text-sm px-3 py-3 rounded-lg m-auto text-white mr-5 bg-blue-700">
+            <label on:click={handleDeleteComment} for={'delete'+deleteCommentId} class="cursor-pointer text-sm px-3 py-3 rounded-lg m-auto text-white mr-5 bg-blue-700">
               Yes, I'm sure
             </label>
               
diff --git a/src/lib/components/TextEditor.svelte b/src/lib/components/TextEditor.svelte
index 60139dbd..8bc02964 100644
--- a/src/lib/components/TextEditor.svelte
+++ b/src/lib/components/TextEditor.svelte
@@ -229,10 +229,10 @@ function handleImageInput(event) {
   
 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
 
-<div class="p-2 w-full max-w-xl mr-auto {commentId?.length !== 0 ? '-ml-2' : ''}">
+<div class="p-2 w-full max-w-xl mr-auto overflow-y-scroll {commentId?.length !== 0 ? '-ml-2' : ''}">
   <textarea
     on:click={() => expandField = true}
-    class="rounded-lg {expandField ? 'min-h-28 h-full border-[#1C4090]' : 'h-12  border-gray-500'} overflow-hidden sm:hover:border-[#1C4090] sm:hover:ring-1 transition sm:ease-out placeholder-gray-500 w-full bg-[#202020] text-white border border-1 ring-2 sm:ring-0 ring-[#1C4090]"
+    class="rounded-lg text-sm  {expandField ? 'min-h-28 h-full border-[#1C4090]' : 'h-12  border-gray-500'} overflow-hidden sm:hover:border-[#1C4090] sm:hover:ring-1 transition sm:ease-out placeholder-gray-500 w-full bg-[#202020] text-white border border-1 ring-2 sm:ring-0 ring-[#1C4090]"
     placeholder={placeholder}
     value={inputValue}
     bind:this={ref}