Merge pull request #13 from Datawheel/grid-layout-tweaks

increases size of vizzes in Grid
Datawheel · Aug 23, 2023 · 4b650f2 · 4b650f2
2 parents 6580816 + 91b102b
commit 4b650f2
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/components/ChartCard.jsx b/src/components/ChartCard.jsx
@@ -87,7 +87,7 @@ export const ChartCard = props => {
   const ButtonIcon = focused ? IconArrowsMinimize : IconArrowsMaximize;
   const buttonText = focused ? translate("action_close") : translate("action_enlarge");
   const buttonVariant = focused ? "filled" : "light";
-  const height = focused ? "calc(100vh - 3rem)" : isSingleChart ? "75vh" : 300;
+  const height = focused ? "calc(100vh - 3rem)" : isSingleChart ? "75vh" : 375;
 
   return (
     <Box className="vb-chart-card" h={height} w="100%" style={{overflow: "hidden"}}>

diff --git a/src/components/Vizbuilder.jsx b/src/components/Vizbuilder.jsx
@@ -23,7 +23,10 @@ export const Vizbuilder = props => {
     const filteredCharts = charts
       .filter((d, i) => charts.findIndex(c => c.key === d.key) === i); // removes duplicate charts
 
-    const colProps = filteredCharts.length === 1 ? {span: 12} : filteredCharts.length === 2 ? {span: 6} : {sm: 6, lg: 4, xl: 3};
+    const colProps = filteredCharts.length === 1 ? {span: 12}
+      : filteredCharts.length === 2 ? {lg: 6}
+      : filteredCharts.length === 3 ? {lg: 6, xl: 4}
+      : {lg: 6, xl: 4, xxl: 3};
 
     if (filteredCharts.length > 0) {
       return (