fix: rebase z-ordering changes

This commit rebases changes proposed by @mairin onto the current main. Goodness is hers; if anything is wrong it's my fault.

This also changes the tooltip 'right' option (verified that it's not used elsewhere) so that the tooltip is more right than bottom-right, which matches tooltip placement in Slack and avoids ordering issues with the status bar.

Signed-off-by: Tim deBoer <git@tdeboer.ca>
This commit is contained in:
Tim deBoer 2023-05-11 11:53:59 -04:00
parent 56220c69ed
commit 486f2cd52e
4 changed files with 6 additions and 5 deletions

View file

@ -82,7 +82,7 @@ window.events?.receive('display-help', () => {
{/if}
<div
class="z-0 w-full h-full min-h-fit flex flex-col overflow-y-scroll"
class="-z-3 w-full h-full min-h-fit flex flex-col overflow-y-scroll"
class:bg-charcoal-700="{!meta.url.startsWith('/preferences')}"
class:bg-charcoal-800="{meta.url.startsWith('/preferences')}">
<TaskManager />

View file

@ -90,7 +90,7 @@ export let meta;
<svelte:window />
<nav
class="pf-c-nav z-0 group w-[54px] min-w-[54px] flex flex-col justify-between overflow-hidden hover:overflow-y-auto top-0"
class="pf-c-nav -z-1 group w-[54px] min-w-[54px] flex flex-col justify-between hover:overflow-y-none top-0"
style="position: sticky"
aria-label="Global">
<ul class="pf-c-nav__list">

View file

@ -49,7 +49,7 @@ $: addSectionHiddenClass = (section: string): string => (sectionExpanded[section
</script>
<nav
class="pf-c-nav z-0 w-[250px] min-w-[200px] flex-col justify-between flex transition-all duration-500 ease-in-out shadow-nav top-0"
class="pf-c-nav -z-2 w-[250px] min-w-[200px] flex-col justify-between flex transition-all duration-500 ease-in-out shadow-nav top-0"
style="background-color: rgb(39 39 42 / var(--tw-bg-opacity)); position: sticky"
aria-label="Global">
<div class="flex items-center">

View file

@ -17,7 +17,8 @@
}
.tooltip.right {
right: 0;
transform: translateX(100%);
transform: translate(100%, -50%);
margin-top: -10px;
margin-right: -8px;
}
.tooltip.top-left {
@ -40,7 +41,7 @@ export let bottom = false;
export let left = false;
</script>
<div class="relative inline-block">
<div class="relative inline-block z-[10]">
<span class="group tooltip-slot">
<slot />
</span>