userAdityaa/flotilla
1
0
Fork 0
forked from coracle/flotilla
Code Pull Requests Activity

fix/tooltip-clipping (#156)

Browse Source 
Co-authored-by: nayan9617 <nayanp4925@gmail.com>
Co-committed-by: nayan9617 <nayanp4925@gmail.com>
This commit is contained in:
nayan9617
2026-04-06 16:14:08 +00:00
committed by hodlbod
parent 61c568a112
commit 70e5172f1b
2 changed files with 37 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+11
View File
@@ -364,6 +364,17 @@
/* tippy popover */ /* tippy popover */
.tippy-target {
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
}
.tippy-target > * {
pointer-events: auto;
}
.tippy-box { .tippy-box {
@apply rounded-box shadow-xl; @apply rounded-box shadow-xl;
} }
src/app/components/RoomDetail.svelte
+26 -25
View File
@@ -22,6 +22,7 @@
import Button from "@lib/components/Button.svelte" import Button from "@lib/components/Button.svelte"
import Popover from "@lib/components/Popover.svelte" import Popover from "@lib/components/Popover.svelte"
import Confirm from "@lib/components/Confirm.svelte" import Confirm from "@lib/components/Confirm.svelte"
import Tooltip from "@lib/components/Tooltip.svelte"
import Modal from "@lib/components/Modal.svelte" import Modal from "@lib/components/Modal.svelte"
import ModalBody from "@lib/components/ModalBody.svelte" import ModalBody from "@lib/components/ModalBody.svelte"
import ModalFooter from "@lib/components/ModalFooter.svelte" import ModalFooter from "@lib/components/ModalFooter.svelte"
@@ -206,39 +207,39 @@
<strong class="text-lg">Room Permissions</strong> <strong class="text-lg">Room Permissions</strong>
<div class="flex gap-2 flex-wrap"> <div class="flex gap-2 flex-wrap">
{#if $room?.isRestricted} {#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}
{#if $room?.isPrivate} {#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}
{#if $room?.isHidden} {#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}
{#if $room?.isClosed} {#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}
{#if !$room?.isRestricted && !$room?.isPrivate && !$room?.isHidden && !$room?.isClosed} {#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} {/if}
</div> </div>
</div> </div>