Migrations/bookorbit
1
0
Fork 0
mirror of https://github.com/bookorbit/bookorbit.git synced 2026-11-03 08:21:39 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix(reader): remove tooltips from selection popup

Browse Source 
Tooltips on the color and style pickers were rendering behind the
popup due to z-index conflicts. Removing them fixes the issue and
simplifies the UI.

Closes #402
This commit is contained in:
neon
2026-06-22 17:13:47 +00:00
parent ad5068cefb
commit f5079d5f04
1 changed files with 19 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/features/reader/epub/components/SelectionPopup.vue
+19 -27
View File
@@ -174,35 +174,27 @@ async function onCopy() {
<div v-if="showColorPicker" class="border-t border-border pt-1.5 space-y-1.5">
<div class="flex gap-1 px-0.5">
<Tooltip v-for="c in colors" :key="c.hex">
<TooltipTrigger as-child>
<button
class="w-6 h-6 rounded-full border-2 transition-all hover:scale-110"
:class="selectedColor === c.hex ? 'border-foreground scale-110' : 'border-transparent'"
:style="{ background: c.hex }"
@click="selectedColor = c.hex"
/>
</TooltipTrigger>
<TooltipContent>{{ c.label }}</TooltipContent>
</Tooltip>
<button
v-for="c in colors"
:key="c.hex"
class="w-6 h-6 rounded-full border-2 transition-all hover:scale-110"
:class="selectedColor === c.hex ? 'border-foreground scale-110' : 'border-transparent'"
:style="{ background: c.hex }"
@click="selectedColor = c.hex"
/>
</div>
<div class="flex gap-1 px-0.5">
<Tooltip v-for="s in styles" :key="s.id">
<TooltipTrigger as-child>
<button
class="w-6 h-6 rounded text-xs font-bold transition-colors border"
:class="
selectedStyle === s.id
? 'bg-primary text-primary-foreground border-primary'
: 'border-border hover:bg-muted text-muted-foreground'
"
@click="selectedStyle = s.id"
>
{{ s.label }}
</button>
</TooltipTrigger>
<TooltipContent>{{ s.id }}</TooltipContent>
</Tooltip>
<button
v-for="s in styles"
:key="s.id"
class="w-6 h-6 rounded text-xs font-bold transition-colors border"
:class="
selectedStyle === s.id ? 'bg-primary text-primary-foreground border-primary' : 'border-border hover:bg-muted text-muted-foreground'
"
@click="selectedStyle = s.id"
>
{{ s.label }}
</button>
<button
class="flex-1 ml-1 px-2 py-0.5 rounded text-xs font-medium bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
@click="applyHighlight(selectedColor, selectedStyle)"