Merge pull request #2250 from visualize-admin/feat/improve-ods-iframe

style: Improve ODS dataset preview iframe's appearance

Author: bprusinowski

CHANGELOG.md

@@ -24,6 +24,7 @@ You can also check the
 - Styles
   - Details button and Created with visualize.admin.ch are now rendered in the
     same line in footnotes when using "minimal" embed mode
+  - Improved ODS dataset preview iframe's appearance
 
 # [5.6.0] - 2025-04-15
 

app/browse/datatable.tsx

@@ -132,7 +132,7 @@ export const PreviewTable = ({
   );
 
   return (
-    <div ref={tooltipContainerRef}>
+    <div ref={tooltipContainerRef} style={{ width: "100%" }}>
       <Table>
         <caption style={{ display: "none" }}>{title}</caption>
         <TableHead

app/browser/dataset-preview.tsx

@@ -45,8 +45,7 @@ const useStyles = makeStyles<
     marginBottom: theme.spacing(6),
   },
   tableOuterWrapper: {
-    width: "fit-content",
-    maxWidth: "100%",
+    width: "100%",
     boxShadow: theme.shadows[4],
   },
   tableInnerWrapper: {

app/browser/select-dataset-step.tsx

@@ -391,7 +391,11 @@ const SelectDatasetStepContent = ({
         }}
       >
         <ContentWrapper
-          sx={odsIframe ? { maxWidth: "unset !important", px: 8 } : {}}
+          sx={
+            odsIframe
+              ? { maxWidth: "unset !important", px: "8px !important" }
+              : {}
+          }
         >
           <AnimatePresence mode="wait">
             {dataset ? (
@@ -488,7 +492,11 @@ const SelectDatasetStepContent = ({
         </ContentWrapper>
       </Box>
       <ContentWrapper
-        sx={odsIframe ? { maxWidth: "unset !important", px: 8 } : {}}
+        sx={
+          odsIframe
+            ? { maxWidth: "unset !important", px: "8px !important" }
+            : {}
+        }
       >
         <PanelLayout
           type={odsIframe ? "M" : "LM"}