refactor: fine-tune show/:id page

experiment-station · Dec 16, 2023 · c73c31d · c73c31d
1 parent b4febb5
commit c73c31d
Showing 1 changed file with 22 additions and 13 deletions.
diff --git a/app/shows/[id]/page.tsx b/app/shows/[id]/page.tsx
@@ -4,6 +4,7 @@ import { EpisodeCard } from '@/components/episode-card';
 import { DatabaseError } from '@/lib/errors';
 import { createSupabaseServerClient } from '@/lib/services/supabase/server';
 import {
+  AspectRatio,
   Avatar,
   Box,
   Flex,
@@ -36,31 +37,39 @@ export default async function Page(props: { params: { id: ShowId } }) {
   }
 
   return (
-    <Flex direction="row" gap="6">
+    <Flex
+      direction={{
+        initial: 'column',
+        xs: 'row',
+      }}
+      gap="6"
+    >
       <Box
         style={{
-          width: 200,
+          width: 240,
         }}
       >
         <Flex direction="column" gap="4">
-          <Avatar
-            alt={data.title}
-            fallback="/images/placeholder.png"
-            radius="small"
-            src={data.images?.[0]}
-            style={{
-              height: 200,
-              width: 200,
-            }}
-          />
+          <AspectRatio ratio={1}>
+            <Avatar
+              alt={data.title}
+              fallback="/images/placeholder.png"
+              radius="small"
+              src={data.images?.[0]}
+              style={{
+                height: 'auto',
+                width: '100%',
+              }}
+            />
+          </AspectRatio>
 
           <Text color="gray" size="2">
             {data.total_episode} episodes.
           </Text>
         </Flex>
       </Box>
 
-      <Flex direction="column" gap="6">
+      <Flex direction="column" gap="6" width="100%">
         <Flex direction="column" gap="2">
           <Heading as="h2" size="6">
             {data.title}