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

fix(reader): add viewport sizing for foliate-view and remove unused CSS

Browse Source 
The foliate-view custom element had no height, causing its shadow DOM
content to collapse to 0px. Books were loading but invisible.

- Add h-screen overflow-hidden to body for full viewport height
- Add block w-full h-full to foliate-view element
- Replace flex-grow with Tailwind grow class on progress slider
- Remove #progress-slider CSS rule from inline style block
  (replaced by Tailwind grow utility)
This commit is contained in:
john-okeefe
2026-04-19 18:08:51 -04:00
parent 58a30b6561
commit 88c8fbc89d
2 changed files with 13 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/reader.templ
+3 -6
View File
@@ -24,15 +24,12 @@ templ Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookm
stroke-linecap: round;
stroke-linejoin: round;
}
#progress-slider {
flex-grow: 1;
}
</style>
</head>
<body
x-data="readerShell"
x-init={ fmt.Sprintf(`initReader({mediaItemId:'%s',fileUrl:'%s',formatGroup:'%s',readingDirection:'%s',mangaType:'%s'})`, metadata.MediaItemID, metadata.FileURL, metadata.FormatGroup, metadata.ReadingDirection, metadata.MangaType) }
class="theme-tokyo-night"
class="theme-tokyo-night h-screen overflow-hidden"
>
@ReaderChrome(user, metadata, progress)
<!-- Dockable Panels Container -->
@@ -56,7 +53,7 @@ templ Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookm
</div>
</div>
</div>
<foliate-view id="reader-view"></foliate-view>
<foliate-view id="reader-view" class="block w-full h-full"></foliate-view>
@DictionaryPopup()
</body>
</html>
@@ -98,7 +95,7 @@ templ ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress)
step="any"
list="tick-marks"
@input="goToFraction($event.target.value)"
class="flex-grow"
class="grow"
/>
<datalist id="tick-marks"></datalist>
<!-- Right navigation -->