diff --git a/static/css/components/dialogs.css b/static/css/components/dialogs.css
index a6a5f771..8790a190 100644
--- a/static/css/components/dialogs.css
+++ b/static/css/components/dialogs.css
@@ -213,10 +213,6 @@
     animation: modalFadeIn 0.2s ease;
 }
 
-.shared-dialog.active {
-    display: flex;
-}
-
 .shared-dialog-content {
     background-color: var(--color-bg-surface);
     border-radius: 16px;
@@ -599,10 +595,6 @@
     z-index: 1000;
 }
 
-.dialog.active {
-    display: flex;
-}
-
 .dialog-content {
     background-color: var(--color-bg-surface);
     border-radius: 10px;
diff --git a/static/js/app/ui.js b/static/js/app/ui.js
index 4c5f0d08..4deac6bb 100644
--- a/static/js/app/ui.js
+++ b/static/js/app/ui.js
@@ -260,6 +260,12 @@ const ui = {
                     contextMenus.closeShareDialog();
                 }
             });
+
+            shareDialog.addEventListener('click', (e) => {
+                if (e.target === shareDialog) {
+                    contextMenus.closeShareDialog();
+                }
+            });
         }
 
         // Notification dialog
diff --git a/static/js/views/shared/sharedView.js b/static/js/views/shared/sharedView.js
index 8c04b008..8e17de2c 100644
--- a/static/js/views/shared/sharedView.js
+++ b/static/js/views/shared/sharedView.js
@@ -157,7 +157,7 @@ const sharedView = {
             </div>
 
             <!-- Share Edit Dialog (sharedView-specific) -->
-            <div id="shared-view-edit-dialog" class="shared-dialog">
+            <div id="shared-view-edit-dialog" class="shared-dialog hidden">
                 <div class="shared-dialog-content">
                     <div class="shared-dialog-header">
                         <span id="sv-dialog-icon">📄</span>
@@ -196,7 +196,7 @@ const sharedView = {
             </div>
 
             <!-- Notification Dialog (sharedView-specific) -->
-            <div id="sv-notification-dialog" class="shared-dialog">
+            <div id="sv-notification-dialog" class="shared-dialog hidden">
                 <div class="shared-dialog-content">
                     <div class="shared-dialog-header">
                         <span id="sv-notify-dialog-icon">📧</span>
@@ -493,12 +493,12 @@ const sharedView = {
             }
         }
 
-        shareDialog.classList.add('active');
+        shareDialog.classList.remove('hidden');
     },
 
     closeShareDialog() {
         const d = document.getElementById('shared-view-edit-dialog');
-        if (d) d.classList.remove('active');
+        if (d) d.classList.add('hidden');
         this.currentItem = null;
     },
 
@@ -516,12 +516,12 @@ const sharedView = {
         if (nameEl) nameEl.textContent = dn;
         if (emailEl) emailEl.value = '';
         if (msgEl) msgEl.value = '';
-        d.classList.add('active');
+        d.classList.remove('hidden');
     },
 
     closeNotificationDialog() {
         const d = document.getElementById('sv-notification-dialog');
-        if (d) d.classList.remove('active');
+        if (d) d.classList.add('hidden');
         this.currentItem = null;
     },