🐛 Fix top-bar flex sizing for mobile"

Fix a small UI issue for mobile/tablet viewports that caused the top-bar to be smaller than it should and the pagination controls on some pages hidden out of frame
stumpapp · Apr 14, 2024 · e03442b · e03442b
1 parent b286339
commit e03442b
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 4 deletions.
diff --git a/packages/browser/src/components/media/BookSearch.tsx b/packages/browser/src/components/media/BookSearch.tsx
@@ -68,7 +68,7 @@ export default function BookSearch({ page, page_size, setPage, onBookSelect, sho
 				{...(showFilters ? { entity: 'media', orderBy: true } : {})}
 			/>
 
-			<div className="flex w-full flex-col space-y-6 pt-4">
+			<div className="flex w-full flex-col space-y-6 pb-[64px] pt-4 md:pb-0">
 				{hasStuff && (
 					<Pagination
 						pages={total_pages}

diff --git a/packages/browser/src/components/navigation/mobile/MobileTopBar.tsx b/packages/browser/src/components/navigation/mobile/MobileTopBar.tsx
@@ -12,12 +12,12 @@ export const TOPBAR_HEIGHT_PX = 53
  */
 export default function TopBar() {
 	return (
-		<header className="sticky top-0 z-10 flex h-[50px] w-full border-b border-edge-200 bg-sidebar px-4 md:hidden">
+		<header className="sticky top-0 z-10 flex h-14 w-full shrink-0 border-b border-edge-200 bg-sidebar px-4 md:hidden">
 			<div className="grid w-full grid-cols-8 items-center gap-2">
 				<div className="col-span-1">
 					<MobileSheet />
 				</div>
-				<div className="col-span-6 flex items-center justify-center gap-2">
+				<div className="col-span-6 flex h-full items-center justify-center gap-2">
 					<Link to="/" className="flex shrink-0 items-center justify-start gap-2">
 						<img src="/assets/favicon.ico" className="h-6 w-6 object-scale-down" />
 						<Heading variant="gradient" size="xs">

diff --git a/packages/browser/src/scenes/home/HomeScene.tsx b/packages/browser/src/scenes/home/HomeScene.tsx
@@ -38,6 +38,7 @@ export default function HomeScene() {
 			<ContinueReadingMedia />
 			<RecentlyAddedMedia />
 			<RecentlyAddedSeries />
+			<div className="pb-5 sm:pb-0" />
 		</SceneContainer>
 	)
 }
diff --git a/packages/browser/src/scenes/series/SeriesBooksScene.tsx b/packages/browser/src/scenes/series/SeriesBooksScene.tsx
@@ -91,7 +91,7 @@ function SeriesOverviewScene() {
 				orderBy
 			/>
 
-			<div className="flex w-full flex-col gap-y-6">
+			<div className="flex w-full flex-col gap-y-6 pb-[64px] md:pb-0">
 				{hasStuff && (
 					<Pagination pages={total_pages} currentPage={current_page} onChangePage={setPage} />
 				)}