screen size translate page

for the chat scroll area

app/root.tsx

@@ -2,6 +2,8 @@ import { type MetaFunction, type LinksFunction } from '@remix-run/node'
 import { Links, Meta, Outlet, Scripts } from '@remix-run/react'
 import stylesheet from '#app/styles/app.css?url'
 import { SiteHeader } from './components/site-header'
+import { useScreenSize } from './utils/screen-size.ts'
+import { cn } from './utils/ui.ts'
 
 export const meta: MetaFunction = () => [
 	{ title: 'Polyglotize' },
@@ -34,10 +36,14 @@ export function Layout({ children }: { children: React.ReactNode }) {
 }
 
 export default function App() {
+	const screenSize = useScreenSize()
+
 	return (
-		<div className="flex min-h-svh flex-col">
+		<div
+			className={cn('flex min-h-svh flex-col', screenSize && 'h-svh max-h-svh')}
+		>
 			<SiteHeader />
-			<div className="flex flex-grow flex-col">
+			<div className={cn('flex flex-grow flex-col', screenSize && 'min-h-0')}>
 				<Outlet />
 			</div>
 		</div>

app/routes/translate.tsx

@@ -16,6 +16,7 @@ import {
 import { Button } from '#app/components/ui/button.tsx'
 import { Card, CardContent } from '#app/components/ui/card.tsx'
 import { ScrollArea } from '#app/components/ui/scroll-area.tsx'
+import { type ScreenSizeHandle } from '#app/utils/screen-size.ts'
 import { targetLangConfig } from '#app/utils/translation.ts'
 import { getSettingsSession, Translator } from '#app/utils/translator.server.ts'
 import { useIsPending } from '#app/utils/ui.ts'
@@ -28,6 +29,10 @@ export const schema = z.object({
 		.max(120, 'Expression is limited to 120 characters.'),
 })
 
+export const handle: ScreenSizeHandle = {
+	screenSize: true,
+}
+
 export const loader = async ({ request }: LoaderFunctionArgs) => {
 	const settings = await getSettingsSession(request)
 
@@ -90,7 +95,7 @@ export default function Page() {
 	const allErrors = Object.values(form.allErrors).flat()
 
 	return (
-		<div className="mx-auto flex w-full max-w-[85ch] flex-grow flex-col font-serif">
+		<div className="mx-auto flex min-h-0 w-full max-w-[85ch] flex-grow flex-col font-serif">
 			<ScrollArea className="flex-grow px-4">
 				{actionData?.data && (
 					<div className="flex flex-col gap-y-4 py-4">

app/utils/screen-size.ts

@@ -0,0 +1,17 @@
+import { useMatches } from '@remix-run/react'
+import { z } from 'zod'
+
+const screenSizeSchema = z.boolean()
+const screenSizeHandleSchema = z.object({ screenSize: screenSizeSchema })
+
+export type ScreenSizeHandle = z.infer<typeof screenSizeHandleSchema>
+
+export const useScreenSize = () => {
+	const matches = useMatches()
+	const screenSize = matches.some(({ handle }) => {
+		const result = screenSizeHandleSchema.safeParse(handle)
+		return result.success && result.data.screenSize
+	})
+
+	return screenSize
+}