Bookhoard/bookhoard
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

fix(reader): both toolbars showed below 768px — cascade-layer conflict

Browse Source 
The display:none for the full toolbar lived in @layer components while
the div also carried Tailwind's flex utility (@layer utilities). Layer
order beats specificity, so the utilities layer always won and the
full bar never hid below the breakpoint (the compact row only worked
because it had no display utility of its own).

Switch to Tailwind's own responsive utilities in the markup — full
toolbar 'hidden md:flex', compact row 'flex md:hidden' — and delete
the custom rules; responsive display now resolves inside a single
layer where source order (responsive variants after base) guarantees
the right winner.
This commit is contained in:
john-okeefe
2026-08-17 13:42:02 -04:00
parent 6cd0fb226a
commit dc68d03360
4 changed files with 10 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/reader.templ
+3 -3
View File
@@ -306,8 +306,8 @@ templ ReaderChrome(metadata ReaderMetadata, progress ReadingProgress) {
</div>
<!-- Fixed-layout row (comics, PDFs, manga) -->
<div x-show="isFixedLayout">
<!-- Full toolbar: desktop/tablet (>= 768px). Wraps gracefully in between. -->
<div class="fx-tools-full flex flex-wrap items-center gap-x-1 gap-y-1 px-1.5 py-1.5 sm:px-2 sm:py-2 sm:gap-1">
<!-- Full toolbar: desktop/tablet (>= 768px, md). Wraps gracefully in between. -->
<div class="hidden md:flex flex-wrap items-center gap-x-1 gap-y-1 px-1.5 py-1.5 sm:px-2 sm:py-2 sm:gap-1">
<div class="flex items-center gap-0.5">
<button @click="goLeft()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Go Left (←)" aria-label="Go left">
<svg class="reader-icon" width="24" height="24" aria-hidden="true">
@@ -404,7 +404,7 @@ templ ReaderChrome(metadata ReaderMetadata, progress ReadingProgress) {
<!-- Compact row (phone-sized windows): single line + ⋯ overflow.
Standard mobile-reader pattern: paging, slider, progress stay;
power tools move into a labeled menu. -->
<div class="fx-compact items-center gap-1 px-1.5 py-1.5">
<div class="flex md:hidden items-center gap-1 px-1.5 py-1.5">
<button @click="goLeft()" class="p-1.5 rounded-lg hover:bg-gray-700" title="Go Left (←)" aria-label="Go left">
<svg class="reader-icon" width="24" height="24" aria-hidden="true">
<path d="M 15 6 L 9 12 L 15 18"></path>