Merge pull request #324 from bento-platform/fix/spreadsheet-view

fix: file view modal display for wide content (e.g., spreadsheets)
bento-platform · Nov 2, 2023 · 5d0ed27 · 5d0ed27
2 parents e2b45ad + 1bf1b59
commit 5d0ed27
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bento_web",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "Bento platform front-end",
   "main": "src/index.js",
   "dependencies": {

diff --git a/src/components/display/FileModal.js b/src/components/display/FileModal.js
@@ -9,14 +9,18 @@ const FileModal = ({ title, visible, onCancel, hasTriggered, url, fileName, load
         title={title}
         visible={visible}
         onCancel={onCancel}
-        width={1080}
+        width={1180}
         style={{
+            // the flex display allows items which are less wide (e.g., portrait PDFs) to have a narrower modal
             display: "flex",
             justifyContent: "center",
             alignItems: "center",
             top: 50,  // down from default of 100; gives a bit more screen real estate
         }}
-        bodyStyle={{ minWidth: "692px" }}
+        bodyStyle={{
+            minWidth: "692px",
+            maxWidth: "1180px",  // needed, otherwise this ends up being more than the parent width for some reason
+        }}
         footer={null}
         // destroyOnClose in order to stop audio/video from playing & avoid memory leaks at the cost of re-fetching:
         destroyOnClose={true}

diff --git a/src/components/manager/ManagerDropBoxContent.js b/src/components/manager/ManagerDropBoxContent.js
@@ -57,7 +57,7 @@ const DROP_BOX_ACTION_CONTAINER_STYLE = {
     position: "sticky",
     paddingBottom: 4,
     backgroundColor: "white",
-    boxShadow: "0 12px 12px white, 0 -10px 0 white",
+    boxShadow: "0 10px 10px white, 0 -10px 0 white",
     top: 8,
     zIndex: 10,
 };