diff --git a/src/components/DashboardContainer.js b/src/components/DashboardContainer.js
index 364f50fea..e765357ee 100644
--- a/src/components/DashboardContainer.js
+++ b/src/components/DashboardContainer.js
@@ -7,32 +7,19 @@ import React, {
createContext,
useContext,
} from 'react'
-import { detectOsScrollbarWidth } from '../modules/detectOsScrollbarWidth.js'
import classes from './styles/DashboardContainer.module.css'
-const ContainerScrollbarWidthContext = createContext(0)
-const osScrollbarWidth = detectOsScrollbarWidth()
+const ContainerWidthContext = createContext(0)
const DashboardContainer = ({ children, covered }) => {
- const [scrollbarWidth, setScrollbarWidth] = useState(0)
- const containerRef = useRef(null)
- const contentWrapRef = useRef(null)
+ const [containerWidth, setContainerWidth] = useState(0)
+ const ref = useRef(null)
useEffect(() => {
- const resizeObserver = new ResizeObserver(() => {
- const el = containerRef.current
- if (!el) {
- throw new Error('Could not find scroll container')
- }
- /* This first condition is true in mobile portrait when there is
- * a scrollbar on the outer scroll-container */
- const isNarrowerThanWindow = window.innerWidth > el.offsetWidth
- const hasInnerScrollbar = el.scrollHeight > el.clientHeight
- setScrollbarWidth(
- isNarrowerThanWindow || hasInnerScrollbar ? osScrollbarWidth : 0
- )
+ const resizeObserver = new ResizeObserver((entries) => {
+ setContainerWidth(entries[0].contentRect.width)
})
- resizeObserver.observe(contentWrapRef.current)
+ resizeObserver.observe(ref.current)
return () => {
resizeObserver.disconnect()
@@ -46,13 +33,12 @@ const DashboardContainer = ({ children, covered }) => {
'dashboard-scroll-container',
covered && classes.covered
)}
- ref={containerRef}
data-test="inner-scroll-container"
>
-
)
@@ -63,6 +49,5 @@ DashboardContainer.propTypes = {
covered: PropTypes.bool,
}
-export const useContainerScrollbarWidth = () =>
- useContext(ContainerScrollbarWidthContext)
+export const useContainerWidth = () => useContext(ContainerWidthContext)
export default DashboardContainer
diff --git a/src/modules/detectOsScrollbarWidth.js b/src/modules/detectOsScrollbarWidth.js
deleted file mode 100644
index 2c516c319..000000000
--- a/src/modules/detectOsScrollbarWidth.js
+++ /dev/null
@@ -1,28 +0,0 @@
-const className = '__horizontal-scrollbar-height-test__'
-const styles = `
- .${className} {
- position: absolute;
- top: -9999px;
- width: 100px;
- height: 100px;
- overflow-y: scroll;
- }
-`
-
-export function detectOsScrollbarWidth() {
- const style = document.createElement('style')
- style.innerHTML = styles
-
- const el = document.createElement('div')
- el.classList.add(className)
-
- document.body.appendChild(style)
- document.body.appendChild(el)
-
- const scrollbarWidth = el.offsetWidth - el.clientWidth
-
- document.body.removeChild(style)
- document.body.removeChild(el)
-
- return scrollbarWidth
-}
diff --git a/src/modules/gridUtil.js b/src/modules/gridUtil.js
index aa780cbdd..e1cd72ed0 100644
--- a/src/modules/gridUtil.js
+++ b/src/modules/gridUtil.js
@@ -21,8 +21,6 @@ const SM_SCREEN_MIN_ITEM_GRID_HEIGHT = 13 // minimum of ~320px
export const SM_SCREEN_GRID_COLUMNS = 1
export const MARGIN_SM_PX = [0, 16]
export const GRID_PADDING_PX = [0, 0]
-// sum of left+right padding of dashboard-wrapper (App.css)
-export const DASHBOARD_WRAPPER_LR_MARGIN_PX = 28
// make an assumption about the original item w/h ratio
// assumes grid width of ~1200px at time dashboard was created
const GRID_COL_WIDTH_PX = 10
@@ -87,15 +85,12 @@ export const withShape = (items = []) => {
)
}
-export const getGridWidth = (windowWidthPx) =>
- windowWidthPx - DASHBOARD_WRAPPER_LR_MARGIN_PX
-
const getGridUnitsForSmFromPx = (hPx) => {
const gridUnitHeightPx = GRID_ROW_HEIGHT_PX + MARGIN_SM_PX[1]
return Math.round((hPx + MARGIN_SM_PX[1]) / gridUnitHeightPx)
}
-export const getProportionalHeight = (item, windowWidthPx) => {
+export const getProportionalHeight = (item, gridWidthPx) => {
// get w/h ratio of the original item
const wPx = getItemWHPx(item.w, GRID_COL_WIDTH_PX, MARGIN_PX[0])
const hPx = getItemWHPx(item.h, GRID_ROW_HEIGHT_PX, MARGIN_PX[1])
@@ -105,8 +100,6 @@ export const getProportionalHeight = (item, windowWidthPx) => {
return getGridUnitsForSmFromPx(hPx)
}
- const gridWidthPx = getGridWidth(windowWidthPx)
-
// get new height in px based on the ratio
const newColWidthPx =
(gridWidthPx -
diff --git a/src/modules/smallScreen.js b/src/modules/smallScreen.js
index 6c79c8e84..1c6f9e522 100644
--- a/src/modules/smallScreen.js
+++ b/src/modules/smallScreen.js
@@ -1,8 +1,6 @@
-import { DASHBOARD_WRAPPER_LR_MARGIN_PX } from './gridUtil.js'
-
const SMALL_SCREEN_BREAKPOINT = 480
export const isSmallScreen = (width) => width <= SMALL_SCREEN_BREAKPOINT
-export const getBreakpoint = () =>
- SMALL_SCREEN_BREAKPOINT - DASHBOARD_WRAPPER_LR_MARGIN_PX
+export const getBreakpoint = (containerWidth) =>
+ SMALL_SCREEN_BREAKPOINT - (window.innerWidth - containerWidth)
diff --git a/src/pages/edit/ItemGrid.js b/src/pages/edit/ItemGrid.js
index 2e503d04a..01ed70b90 100644
--- a/src/pages/edit/ItemGrid.js
+++ b/src/pages/edit/ItemGrid.js
@@ -5,10 +5,10 @@ import React, { useState } from 'react'
import { Responsive as ResponsiveReactGridLayout } from 'react-grid-layout'
import { connect } from 'react-redux'
import { acUpdateDashboardItemShapes } from '../../actions/editDashboard.js'
+import { useContainerWidth } from '../../components/DashboardContainer.js'
import { Item } from '../../components/Item/Item.js'
import NoContentMessage from '../../components/NoContentMessage.js'
import ProgressiveLoadingContainer from '../../components/ProgressiveLoadingContainer.js'
-import { useWindowDimensions } from '../../components/WindowDimensionsProvider.js'
import { EDIT } from '../../modules/dashboardModes.js'
import { getFirstOfTypes } from '../../modules/getFirstOfType.js'
import { getGridItemDomElementClassName } from '../../modules/getGridItemDomElementClassName.js'
@@ -19,7 +19,6 @@ import {
GRID_PADDING_PX,
GRID_COLUMNS,
hasShape,
- getGridWidth,
hasLayout,
} from '../../modules/gridUtil.js'
import { getBreakpoint } from '../../modules/smallScreen.js'
@@ -37,8 +36,8 @@ const EditItemGrid = ({
hasLayout,
hideGrid,
}) => {
+ const containerWidth = useContainerWidth()
const [gridWidth, setGridWidth] = useState({ width: 0 })
- const { width } = useWindowDimensions()
const firstOfTypes = getFirstOfTypes(dashboardItems)
const onLayoutChange = (newLayout) => {
@@ -90,10 +89,10 @@ const EditItemGrid = ({
{
const { width } = useWindowDimensions()
+ const containerWidth = useContainerWidth()
const [expandedItems, setExpandedItems] = useState({})
const [displayItems, setDisplayItems] = useState(dashboardItems)
const [layoutSm, setLayoutSm] = useState([])
@@ -134,10 +135,10 @@ const ResponsiveItemGrid = ({ dashboardId, dashboardItems }) => {