Stop the "Open Files" button from disappearing at certain zoom levels (#5384)

I have been trying to get this perfect for a while, but this is the best
I can do. I tried to get the open files button to be sticky at the
bottom, but beyond certain zoom levels, this causes it to disappear. Not
worth spending more time on it right now.

Co-authored-by: James Brunton <jbrunton96@gmail.com>

frontend/src/core/components/fileManager/FileDetails.tsx

@@ -73,9 +73,9 @@ const FileDetails: React.FC<FileDetailsProps> = ({
   }
 
   return (
-    <Stack gap="lg" h={`calc(${modalHeight} - 2rem)`}>
+    <Stack gap="lg" h={`calc(${modalHeight} - 2rem)`} justify="flex-start">
       {/* Section 1: Thumbnail Preview */}
-      <Box style={{ width: '100%', height: `calc(${modalHeight} * 0.5 - 2rem)`, textAlign: 'center', padding: 'xs' }}>
+      <Box style={{ width: '100%', height: 'min(35vh, 280px)', textAlign: 'center', flexShrink: 0 }}>
         <FilePreview
           file={currentFile}
           thumbnail={getCurrentThumbnail()}
@@ -96,12 +96,10 @@ const FileDetails: React.FC<FileDetailsProps> = ({
 
       <Button
         size="md"
-        mb="xl"
         onClick={onOpenFiles}
         disabled={!hasSelection}
         fullWidth
         style={{
-          flexShrink: 0,
           backgroundColor: hasSelection ? 'var(--btn-open-file)' : 'var(--mantine-color-gray-4)',
           color: 'white'
         }}

frontend/src/core/components/fileManager/FileInfoCard.tsx

@@ -18,13 +18,13 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
   const { t } = useTranslation();
 
   return (
-    <Card withBorder p={0} h={`calc(${modalHeight} * 0.32 - 1rem)`} style={{ flex: 1, overflow: 'hidden' }}>
-      <Box bg="gray.4" p="sm" style={{ borderTopLeftRadius: 'var(--mantine-radius-md)', borderTopRightRadius: 'var(--mantine-radius-md)' }}>
+    <Card withBorder p={0} mah={`calc(${modalHeight} * 0.45)`} style={{ overflow: 'hidden', flexShrink: 1, display: 'flex', flexDirection: 'column' }}>
+      <Box bg="gray.4" p="sm" style={{ borderTopLeftRadius: 'var(--mantine-radius-md)', borderTopRightRadius: 'var(--mantine-radius-md)', flexShrink: 0 }}>
         <Text size="sm" fw={500} ta="center" c="white">
           {t('fileManager.details', 'File Details')}
         </Text>
       </Box>
-      <ScrollArea style={{ flex: 1 }} p="md">
+      <ScrollArea style={{ flex: 1, minHeight: 0 }} p="md">
         <Stack gap="sm">
           <Group justify="space-between" py="xs">
             <Text size="sm" c="dimmed">

frontend/src/core/components/shared/filePreview/DocumentThumbnail.tsx

@@ -41,7 +41,12 @@ const DocumentThumbnail: React.FC<DocumentThumbnailProps> = ({
             src={thumbnail}
             alt={`Preview of ${file.name}`}
             fit="contain"
-            style={{ maxWidth: '100%', maxHeight: '100%' }}
+            style={{ 
+              maxWidth: '100%', 
+              maxHeight: '100%',
+              width: 'auto',
+              height: 'auto'
+            }}
           />
         </PrivateContent>
         {children}