From d9caa3482cd27ae9db0ebb5d4714cd70df94387f Mon Sep 17 00:00:00 2001
From: EthanHealy01 <80844253+EthanHealy01@users.noreply.github.com>
Date: Tue, 6 Jan 2026 16:53:16 +0000
Subject: [PATCH] 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   | 6 ++----
 frontend/src/core/components/fileManager/FileInfoCard.tsx  | 6 +++---
 .../components/shared/filePreview/DocumentThumbnail.tsx    | 7 ++++++-
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/frontend/src/core/components/fileManager/FileDetails.tsx b/frontend/src/core/components/fileManager/FileDetails.tsx
index 428dbb53a..c2afc4776 100644
--- a/frontend/src/core/components/fileManager/FileDetails.tsx
+++ b/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'
         }}
diff --git a/frontend/src/core/components/fileManager/FileInfoCard.tsx b/frontend/src/core/components/fileManager/FileInfoCard.tsx
index e62d3cd64..1588e7427 100644
--- a/frontend/src/core/components/fileManager/FileInfoCard.tsx
+++ b/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">
diff --git a/frontend/src/core/components/shared/filePreview/DocumentThumbnail.tsx b/frontend/src/core/components/shared/filePreview/DocumentThumbnail.tsx
index b60efa208..f672c582e 100644
--- a/frontend/src/core/components/shared/filePreview/DocumentThumbnail.tsx
+++ b/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}