diff --git a/.loki/reference/chrome_laptop_embed_PublicOrEmbeddedDashboardView_filters_Dark_Theme_Number.png b/.loki/reference/chrome_laptop_embed_PublicOrEmbeddedDashboardView_filters_Dark_Theme_Number.png index 1214fa5e39165f256383040ca50bd119ff1c1601..92ff3f78c64b745c36fd32a9424f4129c53c85ae 100644 Binary files a/.loki/reference/chrome_laptop_embed_PublicOrEmbeddedDashboardView_filters_Dark_Theme_Number.png and b/.loki/reference/chrome_laptop_embed_PublicOrEmbeddedDashboardView_filters_Dark_Theme_Number.png differ diff --git a/.loki/reference/chrome_laptop_embed_PublicOrEmbeddedDashboardView_filters_Light_Theme_Date_Filter_Quarter_Year_Dropdown.png b/.loki/reference/chrome_laptop_embed_PublicOrEmbeddedDashboardView_filters_Light_Theme_Date_Filter_Quarter_Year_Dropdown.png index a30f79954011559abf2119afc5d207d4db74b99e..1a12b8761bb5b9d01e434985546817f6f5ff10e8 100644 Binary files a/.loki/reference/chrome_laptop_embed_PublicOrEmbeddedDashboardView_filters_Light_Theme_Date_Filter_Quarter_Year_Dropdown.png and b/.loki/reference/chrome_laptop_embed_PublicOrEmbeddedDashboardView_filters_Light_Theme_Date_Filter_Quarter_Year_Dropdown.png differ diff --git a/.loki/reference/chrome_laptop_viz_PivotTable_No_Outer_Horizontal_Scroll.png b/.loki/reference/chrome_laptop_viz_PivotTable_No_Outer_Horizontal_Scroll.png new file mode 100644 index 0000000000000000000000000000000000000000..ad2c5017b9d9df8dc9f688cab2a16b1890cbff0b Binary files /dev/null and b/.loki/reference/chrome_laptop_viz_PivotTable_No_Outer_Horizontal_Scroll.png differ diff --git a/frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.stories.tsx b/frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.stories.tsx index 0ba8b6444012f048010514f546b14bd238d5dba1..c77efc737fd1455d5d4e3a3f1ff90ff3c088b0aa 100644 --- a/frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.stories.tsx +++ b/frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.stories.tsx @@ -60,6 +60,7 @@ export const HorizontalScroll43215: Story = () => { <PivotTableTestWrapper data={PIVOT_3_ROWS_NO_COLUMNS.data} initialSettings={PIVOT_3_ROWS_NO_COLUMNS.initialSettings} + isEditing /> </Box> </VisualizationWrapper> @@ -75,6 +76,24 @@ export const OuterHorizontalScroll: Story = () => { initialSettings={PIVOT_3_ROWS_NO_COLUMNS.initialSettings} containerWidth containerHeight + isEditing + /> + </Box> + </VisualizationWrapper> + ); +}; + +export const NoOuterHorizontalScroll: Story = () => { + return ( + <VisualizationWrapper> + <Box h="400px" w="320px"> + <PivotTableTestWrapper + data={PIVOT_3_ROWS_NO_COLUMNS.data} + initialSettings={PIVOT_3_ROWS_NO_COLUMNS.initialSettings} + containerWidth + containerHeight + isEditing + isDashboard /> </Box> </VisualizationWrapper> diff --git a/frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.styled.tsx b/frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.styled.tsx index 359fd3eda7a791db390e3b4037b3444e3070992e..f0b344912d4b327a46ecc3b6d4586f61f38f3cf5 100644 --- a/frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.styled.tsx +++ b/frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.styled.tsx @@ -147,7 +147,7 @@ interface PivotTableRootProps { isDashboard?: boolean; isNightMode?: boolean; shouldOverflow?: boolean; - isEditing?: boolean; + shouldHideScrollbars?: boolean; } export const PivotTableRoot = styled.div<PivotTableRootProps>` @@ -164,7 +164,7 @@ export const PivotTableRoot = styled.div<PivotTableRootProps>` : null} ${props => - props.isEditing + props.shouldHideScrollbars ? css` & { user-select: none; diff --git a/frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.tsx b/frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.tsx index 61d30b9e3841acee1127ef7339b0d8826c85e640..599b979e53b3c74e1865455a06171e2ccfdc69a6 100644 --- a/frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.tsx +++ b/frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.tsx @@ -346,7 +346,7 @@ function _PivotTable({ return ( <PivotTableRoot shouldOverflow={shouldOverflow} - isEditing={isEditing} + shouldHideScrollbars={isEditing && isDashboard} isDashboard={isDashboard} isNightMode={isNightMode} data-testid="pivot-table"