fix/tooltip-clipping (#156)

Co-authored-by: nayan9617 <nayanp4925@gmail.com>
Co-committed-by: nayan9617 <nayanp4925@gmail.com>

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;
 }

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
+          <Tooltip content="Only members can send messages.">
-            class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
+            <Button class="btn btn-neutral btn-xs rounded-full flex gap-2 items-center">
-            data-tip="Only members can send messages.">
+              <Icon size={4} icon={Microphone} /> Restricted
-            <Icon size={4} icon={Microphone} /> Restricted
+            </Button>
-          </Button>
+          </Tooltip>
         {/if}
         {#if $room?.isPrivate}
-          <Button
+          <Tooltip content="Only members can view messages.">
-            class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
+            <Button class="btn btn-neutral btn-xs rounded-full flex gap-2 items-center">
-            data-tip="Only members can view messages.">
+              <Icon size={4} icon={Lock} /> Private
-            <Icon size={4} icon={Lock} /> Private
+            </Button>
-          </Button>
+          </Tooltip>
         {/if}
         {#if $room?.isHidden}
-          <Button
+          <Tooltip content="This room is not visible to non-members.">
-            class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
+            <Button class="btn btn-neutral btn-xs rounded-full flex gap-2 items-center">
-            data-tip="This room is not visible to non-members.">
+              <Icon size={4} icon={EyeClosed} /> Hidden
-            <Icon size={4} icon={EyeClosed} /> Hidden
+            </Button>
-          </Button>
+          </Tooltip>
         {/if}
         {#if $room?.isClosed}
-          <Button
+          <Tooltip content="Requests to join this room will be ignored.">
-            class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
+            <Button class="btn btn-neutral btn-xs rounded-full flex gap-2 items-center">
-            data-tip="Requests to join this room will be ignored.">
+              <Icon size={4} icon={MinusCircle} /> Closed
-            <Icon size={4} icon={MinusCircle} /> Closed
+            </Button>
-          </Button>
+          </Tooltip>
         {/if}
         {#if !$room?.isRestricted && !$room?.isPrivate && !$room?.isHidden && !$room?.isClosed}
-          <Button
+          <Tooltip content="This room has no additional access controls.">
-            class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
+            <Button class="btn btn-neutral btn-xs rounded-full flex gap-2 items-center">
-            data-tip="This room has no additional access controls.">
+              <Icon size={4} icon={Eye} /> Public
-            <Icon size={4} icon={Eye} /> Public
+            </Button>
-          </Button>
+          </Tooltip>
         {/if}
       </div>
     </div>