full screen height

apps/gnocchi/hub/src/components/MainImage.tsx

@@ -2,18 +2,18 @@ import { TopLineImage } from './layout.jsx';
 import { clsx } from '@a-type/ui';
 
 export interface MainImageProps {
-  url: string;
-  title: string;
+	url: string;
+	title: string;
 }
 
 export function MainImage({ url, title }: MainImageProps) {
-  return (
-    <TopLineImage className="block relative w-full h-30vh rounded-lg overflow-hidden">
-      <img
-        src={url}
-        className={clsx('u-photo', 'object-cover object-center w-full h-full')}
-        alt={`A photo of ${title}`}
-      />
-    </TopLineImage>
-  );
+	return (
+		<TopLineImage className="block relative w-full h-30dvh rounded-lg overflow-hidden">
+			<img
+				src={url}
+				className={clsx('u-photo', 'object-cover object-center w-full h-full')}
+				alt={`A photo of ${title}`}
+			/>
+		</TopLineImage>
+	);
 }

apps/gnocchi/hub/src/components/layout.tsx

@@ -1,24 +1,24 @@
 import { clsx } from '@a-type/ui';
 
 export const TopLineRoot = (props: any) => (
-  <div
-    className={clsx(
-      'grid grid-areas-[image]-[title] grid-cols-[1fr] grid-rows-[auto_1fr] mb-6 gap-4',
-      'lg:grid-areas-[title_image] lg:grid-cols-[auto_minmax(min-content,1fr)]',
-    )}
-    {...props}
-  />
+	<div
+		className={clsx(
+			'grid grid-areas-[image]-[title] grid-cols-[1fr] grid-rows-[auto_1fr] mb-6 gap-4',
+			'lg:grid-areas-[title_image] lg:grid-cols-[auto_minmax(min-content,1fr)]',
+		)}
+		{...props}
+	/>
 );
 
 export const TopLineTitle = (props: any) => (
-  <div className={clsx('[grid-area:title] flex flex-col gap-2')} {...props} />
+	<div className={clsx('[grid-area:title] flex flex-col gap-2')} {...props} />
 );
 
 export const TopLineImage = (props: any) => (
-  <div
-    className={clsx(
-      '[grid-area:image] w-full h-30vh lg:w-full lg:min-w-200px lg:h-200px',
-    )}
-    {...props}
-  />
+	<div
+		className={clsx(
+			'[grid-area:image] w-full h-30dvh lg:w-full lg:min-w-200px lg:h-200px',
+		)}
+		{...props}
+	/>
 );