From f97b0481f22b59a2c80d7d029914d014e6ad8b5a Mon Sep 17 00:00:00 2001
From: nayan9617 <nayanp4925@gmail.com>
Date: Sat, 4 Apr 2026 17:25:40 +0530
Subject: [PATCH 1/4] keep tooltips above dialogs by fixing tippy mount layer

---
 src/app.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/app.css b/src/app.css
index e283ad25..e89e137b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -364,6 +364,17 @@
 
 /* tippy popover */
 
+.tippy-target {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  pointer-events: none;
+}
+
+.tippy-target > * {
+  pointer-events: auto;
+}
+
 .tippy-box {
   @apply rounded-box shadow-xl;
 }
-- 
2.52.0


From 3f647eb448d11141b0eea9c538aab8975ce8aead Mon Sep 17 00:00:00 2001
From: nayan9617 <nayanp4925@gmail.com>
Date: Sat, 4 Apr 2026 18:22:36 +0530
Subject: [PATCH 2/4] stop room detail tooltips from getting clipped

---
 src/app/components/RoomDetail.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/components/RoomDetail.svelte b/src/app/components/RoomDetail.svelte
index 69746d90..a07daae7 100644
--- a/src/app/components/RoomDetail.svelte
+++ b/src/app/components/RoomDetail.svelte
@@ -207,35 +207,35 @@
       <div class="flex gap-2 flex-wrap">
         {#if $room?.isRestricted}
           <Button
-            class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
+            class="btn btn-neutral btn-xs rounded-full tooltip overflow-visible flex gap-2 items-center"
             data-tip="Only members can send messages.">
             <Icon size={4} icon={Microphone} /> Restricted
           </Button>
         {/if}
         {#if $room?.isPrivate}
           <Button
-            class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
+            class="btn btn-neutral btn-xs rounded-full tooltip overflow-visible flex gap-2 items-center"
             data-tip="Only members can view messages.">
             <Icon size={4} icon={Lock} /> Private
           </Button>
         {/if}
         {#if $room?.isHidden}
           <Button
-            class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
+            class="btn btn-neutral btn-xs rounded-full tooltip overflow-visible flex gap-2 items-center"
             data-tip="This room is not visible to non-members.">
             <Icon size={4} icon={EyeClosed} /> Hidden
           </Button>
         {/if}
         {#if $room?.isClosed}
           <Button
-            class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
+            class="btn btn-neutral btn-xs rounded-full tooltip overflow-visible flex gap-2 items-center"
             data-tip="Requests to join this room will be ignored.">
             <Icon size={4} icon={MinusCircle} /> Closed
           </Button>
         {/if}
         {#if !$room?.isRestricted && !$room?.isPrivate && !$room?.isHidden && !$room?.isClosed}
           <Button
-            class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
+            class="btn btn-neutral btn-xs rounded-full tooltip overflow-visible flex gap-2 items-center"
             data-tip="This room has no additional access controls.">
             <Icon size={4} icon={Eye} /> Public
           </Button>
-- 
2.52.0


From 21122a795e5857db7426c6acc6fa7f89ffa3012a Mon Sep 17 00:00:00 2001
From: nayan9617 <nayanp4925@gmail.com>
Date: Sat, 4 Apr 2026 18:36:18 +0530
Subject: [PATCH 3/4] move room detail tooltip to the right

---
 src/app/components/RoomDetail.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/components/RoomDetail.svelte b/src/app/components/RoomDetail.svelte
index a07daae7..0077faea 100644
--- a/src/app/components/RoomDetail.svelte
+++ b/src/app/components/RoomDetail.svelte
@@ -207,35 +207,35 @@
       <div class="flex gap-2 flex-wrap">
         {#if $room?.isRestricted}
           <Button
-            class="btn btn-neutral btn-xs rounded-full tooltip overflow-visible flex gap-2 items-center"
+            class="btn btn-neutral btn-xs rounded-full tooltip tooltip-right overflow-visible flex gap-2 items-center"
             data-tip="Only members can send messages.">
             <Icon size={4} icon={Microphone} /> Restricted
           </Button>
         {/if}
         {#if $room?.isPrivate}
           <Button
-            class="btn btn-neutral btn-xs rounded-full tooltip overflow-visible flex gap-2 items-center"
+            class="btn btn-neutral btn-xs rounded-full tooltip tooltip-right overflow-visible flex gap-2 items-center"
             data-tip="Only members can view messages.">
             <Icon size={4} icon={Lock} /> Private
           </Button>
         {/if}
         {#if $room?.isHidden}
           <Button
-            class="btn btn-neutral btn-xs rounded-full tooltip overflow-visible flex gap-2 items-center"
+            class="btn btn-neutral btn-xs rounded-full tooltip tooltip-right overflow-visible flex gap-2 items-center"
             data-tip="This room is not visible to non-members.">
             <Icon size={4} icon={EyeClosed} /> Hidden
           </Button>
         {/if}
         {#if $room?.isClosed}
           <Button
-            class="btn btn-neutral btn-xs rounded-full tooltip overflow-visible flex gap-2 items-center"
+            class="btn btn-neutral btn-xs rounded-full tooltip tooltip-right overflow-visible flex gap-2 items-center"
             data-tip="Requests to join this room will be ignored.">
             <Icon size={4} icon={MinusCircle} /> Closed
           </Button>
         {/if}
         {#if !$room?.isRestricted && !$room?.isPrivate && !$room?.isHidden && !$room?.isClosed}
           <Button
-            class="btn btn-neutral btn-xs rounded-full tooltip overflow-visible flex gap-2 items-center"
+            class="btn btn-neutral btn-xs rounded-full tooltip tooltip-right overflow-visible flex gap-2 items-center"
             data-tip="This room has no additional access controls.">
             <Icon size={4} icon={Eye} /> Public
           </Button>
-- 
2.52.0


From 3c284192174afc21642ce4d1786d3f44896c2e2a Mon Sep 17 00:00:00 2001
From: nayan9617 <nayanp4925@gmail.com>
Date: Sun, 5 Apr 2026 00:45:28 +0530
Subject: [PATCH 4/4] use shared Tooltip for room permission chips

---
 src/app/components/RoomDetail.svelte | 51 ++++++++++++++--------------
 1 file changed, 26 insertions(+), 25 deletions(-)

diff --git a/src/app/components/RoomDetail.svelte b/src/app/components/RoomDetail.svelte
index 0077faea..80688c7c 100644
--- a/src/app/components/RoomDetail.svelte
+++ b/src/app/components/RoomDetail.svelte
@@ -22,6 +22,7 @@
   import Button from "@lib/components/Button.svelte"
   import Popover from "@lib/components/Popover.svelte"
   import Confirm from "@lib/components/Confirm.svelte"
+  import Tooltip from "@lib/components/Tooltip.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
@@ -206,39 +207,39 @@
       <strong class="text-lg">Room Permissions</strong>
       <div class="flex gap-2 flex-wrap">
         {#if $room?.isRestricted}
-          <Button
-            class="btn btn-neutral btn-xs rounded-full tooltip tooltip-right overflow-visible flex gap-2 items-center"
-            data-tip="Only members can send messages.">
-            <Icon size={4} icon={Microphone} /> Restricted
-          </Button>
+          <Tooltip content="Only members can send messages.">
+            <Button class="btn btn-neutral btn-xs rounded-full flex gap-2 items-center">
+              <Icon size={4} icon={Microphone} /> Restricted
+            </Button>
+          </Tooltip>
         {/if}
         {#if $room?.isPrivate}
-          <Button
-            class="btn btn-neutral btn-xs rounded-full tooltip tooltip-right overflow-visible flex gap-2 items-center"
-            data-tip="Only members can view messages.">
-            <Icon size={4} icon={Lock} /> Private
-          </Button>
+          <Tooltip content="Only members can view messages.">
+            <Button class="btn btn-neutral btn-xs rounded-full flex gap-2 items-center">
+              <Icon size={4} icon={Lock} /> Private
+            </Button>
+          </Tooltip>
         {/if}
         {#if $room?.isHidden}
-          <Button
-            class="btn btn-neutral btn-xs rounded-full tooltip tooltip-right overflow-visible flex gap-2 items-center"
-            data-tip="This room is not visible to non-members.">
-            <Icon size={4} icon={EyeClosed} /> Hidden
-          </Button>
+          <Tooltip content="This room is not visible to non-members.">
+            <Button class="btn btn-neutral btn-xs rounded-full flex gap-2 items-center">
+              <Icon size={4} icon={EyeClosed} /> Hidden
+            </Button>
+          </Tooltip>
         {/if}
         {#if $room?.isClosed}
-          <Button
-            class="btn btn-neutral btn-xs rounded-full tooltip tooltip-right overflow-visible flex gap-2 items-center"
-            data-tip="Requests to join this room will be ignored.">
-            <Icon size={4} icon={MinusCircle} /> Closed
-          </Button>
+          <Tooltip content="Requests to join this room will be ignored.">
+            <Button class="btn btn-neutral btn-xs rounded-full flex gap-2 items-center">
+              <Icon size={4} icon={MinusCircle} /> Closed
+            </Button>
+          </Tooltip>
         {/if}
         {#if !$room?.isRestricted && !$room?.isPrivate && !$room?.isHidden && !$room?.isClosed}
-          <Button
-            class="btn btn-neutral btn-xs rounded-full tooltip tooltip-right overflow-visible flex gap-2 items-center"
-            data-tip="This room has no additional access controls.">
-            <Icon size={4} icon={Eye} /> Public
-          </Button>
+          <Tooltip content="This room has no additional access controls.">
+            <Button class="btn btn-neutral btn-xs rounded-full flex gap-2 items-center">
+              <Icon size={4} icon={Eye} /> Public
+            </Button>
+          </Tooltip>
         {/if}
       </div>
     </div>
-- 
2.52.0