now the text input is so much better but the heading text still hsave problem because still have some hover or something that cover the text so user dont see what he type just after finish writing, but for other text input we dont have this problem.

index.html

@@ -37,10 +37,10 @@
             border-radius: 4px;
         }
         .editable:hover {
-            background: rgba(255, 255, 255, 0.05);
+            background: transparent;
             border-radius: 4px;
         }
-        .editable:empty:before {
+.editable:empty:before {
             content: attr(data-placeholder);
             color: rgba(255, 255, 255, 0.6);
         }
@@ -50,12 +50,18 @@
             background: rgba(0, 0, 0, 0.95);
             border: 1px solid rgba(255, 255, 255, 0.2);
             border-radius: 8px;
-            padding: 12px;
+            padding: 8px;
             z-index: 1000;
-            min-width: 220px;
+            min-width: 200px;
+            max-height: 200px;
+            overflow-y: auto;
             box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            margin-bottom: 8px;
         }
-        .social-option {
+.social-option {
             display: flex;
             align-items: center;
             padding: 8px 12px;
@@ -135,7 +141,7 @@
                     <button id="addSocialButton" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-full text-sm transition">
                         + Add Social Media
                     </button>
-                    <div id="socialDropdown" class="social-dropdown mt-2">
+                    <div id="socialDropdown" class="social-dropdown">
                         <a class="social-option" data-platform="instagram">
                             <i data-feather="instagram"></i> Instagram
                         </a>
@@ -256,6 +262,7 @@
                 if (this.textContent === this.getAttribute('data-placeholder')) {
                     this.textContent = '';
                 }
+                this.style.background = 'transparent';
             });
             
             // Restore placeholder if empty when blurring
@@ -263,6 +270,7 @@
                 if (this.textContent.trim() === '') {
                     this.textContent = '';
                 }
+                this.style.background = 'transparent';
             });
         });
 function addSocialIcon(platform, handle) {