From b06b762895d976cdb634f7ddfa6b0411248601cf Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Sun, 12 Jan 2025 14:58:52 +1100
Subject: [PATCH] [UI] Reactive Details Columns (#8883)

* Adapt details column count

- Based on element width

* Pin minimum size of thumbnail

* Cleaner implementation

* Revert again

- Use element size, not screen size
---
 src/frontend/src/components/details/ItemDetails.tsx | 8 +++++++-
 src/frontend/src/components/nav/PageDetail.tsx      | 8 +++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/components/details/ItemDetails.tsx b/src/frontend/src/components/details/ItemDetails.tsx
index f1e18fa1b9..77750caf7e 100644
--- a/src/frontend/src/components/details/ItemDetails.tsx
+++ b/src/frontend/src/components/details/ItemDetails.tsx
@@ -1,10 +1,16 @@
 import { Paper, SimpleGrid } from '@mantine/core';
+import { useElementSize } from '@mantine/hooks';
 import type React from 'react';
+import { useMemo } from 'react';
 
 export function ItemDetailsGrid(props: React.PropsWithChildren<{}>) {
+  const { ref, width } = useElementSize();
+
+  const cols = useMemo(() => (width > 700 ? 2 : 1), [width]);
+
   return (
     <Paper p='xs'>
-      <SimpleGrid cols={2} spacing='xs' verticalSpacing='xs'>
+      <SimpleGrid cols={cols} spacing='xs' verticalSpacing='xs' ref={ref}>
         {props.children}
       </SimpleGrid>
     </Paper>
diff --git a/src/frontend/src/components/nav/PageDetail.tsx b/src/frontend/src/components/nav/PageDetail.tsx
index d61f4c6586..28cfecd037 100644
--- a/src/frontend/src/components/nav/PageDetail.tsx
+++ b/src/frontend/src/components/nav/PageDetail.tsx
@@ -66,7 +66,13 @@ export function PageDetail({
             <Group justify='space-between' wrap='nowrap'>
               <Group justify='left' wrap='nowrap'>
                 {imageUrl && (
-                  <ApiImage src={imageUrl} radius='sm' mah={42} maw={42} />
+                  <ApiImage
+                    src={imageUrl}
+                    radius='sm'
+                    miw={42}
+                    mah={42}
+                    maw={42}
+                  />
                 )}
                 <Stack gap='xs'>
                   {title && <StylishText size='lg'>{title}</StylishText>}