style(dev): update layout and styling for improved responsiveness

- Enabled MobileListResourceNavigation in the post layout for better navigation on mobile devices.
- Adjusted positioning of the resource navigation component for enhanced visibility.
- Refined styling for the PostNextUpFromListPagination and PostPlayer components to ensure consistent design across different screen sizes.
- Added padding to the search component for improved layout on mobile.

Author: vojtaholik

apps/dev-build/src/app/(content)/[post]/_components/list-resource-navigation.tsx

@@ -159,7 +159,7 @@ export function MobileListResourceNavigation() {
 
 	return (
 		<>
-			<div className="bg-card fixed left-1 top-1.5 z-50 flex scale-90 items-center gap-4 rounded-lg border py-1 pl-1 pr-6 shadow-sm sm:left-3 xl:sr-only xl:hidden">
+			<div className="bg-card fixed bottom-1.5 left-1 z-50 flex scale-90 items-center gap-4 rounded-lg border py-1 pl-1 pr-6 shadow-sm sm:left-3 md:sr-only md:hidden">
 				<Button
 					className="rounded"
 					onClick={() => {

apps/dev-build/src/app/(content)/[post]/layout.tsx

@@ -47,7 +47,7 @@ export default async function Layout(props: {
 									{/* {list && (
 										<ModuleResourceList className="sticky top-0 hidden max-w-xs border-x border-b lg:block" />
 									)} */}
-									{/* <MobileListResourceNavigation /> */}
+									<MobileListResourceNavigation />
 									<div className="w-full min-w-0">{props.children}</div>
 								</div>
 							</LayoutClient>

apps/dev-build/src/app/(content)/_components/post-next-up-from-list-pagination.tsx

@@ -80,7 +80,7 @@ export default function PostNextUpFromListPagination({
 				<li className="flex flex-col">
 					<Link
 						href={`/${nextUp.resource.fields?.slug}`}
-						className="dark:text-primary text-primary-dark flex w-full items-center gap-2 text-balance text-lg underline hover:underline lg:text-xl"
+						className="text-primary-dark flex w-full items-center gap-2 text-balance text-lg underline hover:underline lg:text-xl"
 						onClick={async () => {
 							if (!isCompleted) {
 								addLessonProgress(postId)

apps/dev-build/src/app/(content)/posts/_components/post-player.tsx

@@ -178,7 +178,7 @@ export function PostPlayer({
 			</div>
 			{list && (
 				<ModuleResourceList
-					className="dark max-w-xs"
+					className="dark hidden max-w-xs md:block"
 					currentLessonSlug={postSlug}
 					options={{ stretchToFullViewportHeight: false }}
 				/>

apps/dev-build/src/app/(search)/browse/_components/search.tsx

@@ -84,7 +84,7 @@ function SearchContent() {
 
 				{/* Mobile layout */}
 				<div className="flex flex-col gap-4 md:hidden">
-					<div className="flex items-center gap-3">
+					<div className="flex items-center gap-3 px-3 pt-3">
 						<div className="flex-1">
 							<SearchBox />
 						</div>