From 1a5c1b55932f70f5542d56f3dc8b630901886d6b Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Sat, 11 Jan 2025 23:37:36 +0000
Subject: [PATCH 1/4] Adapt details column count

- Based on element width
---
 src/frontend/src/components/details/ItemDetails.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/components/details/ItemDetails.tsx b/src/frontend/src/components/details/ItemDetails.tsx
index f1e18fa1b91a..77750caf7ea8 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>

From 949c18fbc84f9a8beebe066997b0b37a362c8a7b Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Sun, 12 Jan 2025 02:23:15 +0000
Subject: [PATCH 2/4] Pin minimum size of thumbnail

---
 src/frontend/src/components/nav/PageDetail.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/components/nav/PageDetail.tsx b/src/frontend/src/components/nav/PageDetail.tsx
index d61f4c658682..28cfecd037e7 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>}

From 637a2579e6cd1c278c88ab36bd8a42b07800e3ec Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Sun, 12 Jan 2025 02:27:25 +0000
Subject: [PATCH 3/4] Cleaner implementation

---
 src/frontend/src/components/details/ItemDetails.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/frontend/src/components/details/ItemDetails.tsx b/src/frontend/src/components/details/ItemDetails.tsx
index 77750caf7ea8..b6a4abc2b4a5 100644
--- a/src/frontend/src/components/details/ItemDetails.tsx
+++ b/src/frontend/src/components/details/ItemDetails.tsx
@@ -1,16 +1,10 @@
 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={cols} spacing='xs' verticalSpacing='xs' ref={ref}>
+      <SimpleGrid cols={{ base: 1, md: 2 }} spacing='xs' verticalSpacing='xs'>
         {props.children}
       </SimpleGrid>
     </Paper>

From 2c2dcc0a5dff7d68c873f607a619d0fdad0df4a7 Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Sun, 12 Jan 2025 02:29:14 +0000
Subject: [PATCH 4/4] Revert again

- Use element size, not screen size
---
 src/frontend/src/components/details/ItemDetails.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/components/details/ItemDetails.tsx b/src/frontend/src/components/details/ItemDetails.tsx
index b6a4abc2b4a5..77750caf7ea8 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={{ base: 1, md: 2 }} spacing='xs' verticalSpacing='xs'>
+      <SimpleGrid cols={cols} spacing='xs' verticalSpacing='xs' ref={ref}>
         {props.children}
       </SimpleGrid>
     </Paper>