[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

@@ -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>

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>}