fix: Empty elements taking space in Tall dashboard layout

visualize-admin · May 8, 2024 · f482763 · f482763
1 parent 0920355
commit f482763
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx
@@ -35,6 +35,7 @@ import { Checkbox } from "@/components/form";
 import { HintYellow } from "@/components/hint";
 import { MetadataPanel } from "@/components/metadata-panel";
 import { BANNER_MARGIN_TOP } from "@/components/presence";
+import VisuallyHidden from "@/components/visually-hidden";
 import {
   ChartConfig,
   DataSource,
@@ -411,7 +412,7 @@ export const ChartPreviewInner = (props: ChartPreviewInnerProps) => {
                   ) : (
                     // We need to have a span here to keep the space between the
                     // title and the chart (subgrid layout)
-                    <span />
+                    <VisuallyHidden />
                   )}
                   <Flex sx={{ alignItems: "center", gap: 2 }}>
                     {!disableMetadataPanel && (
@@ -443,7 +444,7 @@ export const ChartPreviewInner = (props: ChartPreviewInnerProps) => {
                 ) : (
                   // We need to have a span here to keep the space between the
                   // title and the chart (subgrid layout)
-                  <span />
+                  <VisuallyHidden />
                 )}
                 {chartConfig.interactiveFiltersConfig?.dataFilters.active ? (
                   <ChartDataFilters
@@ -453,7 +454,7 @@ export const ChartPreviewInner = (props: ChartPreviewInnerProps) => {
                 ) : (
                   // We need to have a span here to keep the space between the
                   // description and the chart (subgrid layout)
-                  <span />
+                  <VisuallyHidden />
                 )}
                 <div
                   ref={containerRef}

diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx
@@ -30,6 +30,7 @@ import {
   MetadataPanelStoreContext,
   createMetadataPanelStore,
 } from "@/components/metadata-panel-store";
+import VisuallyHidden from "@/components/visually-hidden";
 import {
   ChartConfig,
   ConfiguratorStatePublished,
@@ -308,7 +309,7 @@ const ChartPublishedInner = (props: ChartPublishInnerProps) => {
                 ) : (
                   // We need to have a span here to keep the space between the
                   // title and the chart (subgrid layout)
-                  <span />
+                  <VisuallyHidden />
                 )}
                 <MetadataPanel
                   dataSource={dataSource}
@@ -322,7 +323,7 @@ const ChartPublishedInner = (props: ChartPublishInnerProps) => {
               ) : (
                 // We need to have a span here to keep the space between the
                 // title and the chart (subgrid layout)
-                <span />
+                <VisuallyHidden />
               )}
               {chartConfig.interactiveFiltersConfig?.dataFilters.active ? (
                 <ChartDataFilters
@@ -332,7 +333,7 @@ const ChartPublishedInner = (props: ChartPublishInnerProps) => {
               ) : (
                 // We need to have a span here to keep the space between the
                 // description and the chart (subgrid layout)
-                <span />
+                <VisuallyHidden />
               )}
               <div
                 ref={containerRef}

diff --git a/app/components/chart-utils.ts b/app/components/chart-utils.ts
@@ -9,6 +9,7 @@ export const useChartStyles = makeStyles<Theme>((theme) => ({
     display: "grid",
     gridTemplateRows: "subgrid",
     gridRow: shouldShowDebugPanel() ? "span 7" : "span 6",
+    rowGap: 0,
     padding: theme.spacing(6),
     backgroundColor: theme.palette.background.paper,
     border: "1px solid",

diff --git a/app/components/visually-hidden.tsx b/app/components/visually-hidden.tsx
@@ -1,7 +1,7 @@
 import { Box } from "@mui/material";
 import { visuallyHidden } from "@mui/utils";
 
-const VisuallyHidden = ({ children }: { children: React.ReactNode }) => {
+const VisuallyHidden = ({ children }: { children?: React.ReactNode }) => {
   // @ts-ignore - I do not know why CSSProperties do not go directly into sx. It works.
   return <Box sx={visuallyHidden}>{children}</Box>;
 };