4ff39ca could help with the occasional layout spill, although I still think we can mostly tackle it through container units and setting width appropriately on images! But when a spill does happen, we want it to just be visual (the content extends beyond the edge of the window visually) and not layout-wise: if the layout gets forced to be wider, that's when we start seeing scroll bars.
sticky-col-stack has display: grid to facilitate the Z-stacking. It happens the same way Reveal does it: it's (another) nested grid layout where everything is put into the same row and column track (hence the grid-area: 1 / 1 and margin: auto on .sticky-col-stack [data-cr-id]) 😊
Andrew:
@jimjam-slam What are your thoughts on https://github.com/qmd-lab/closeread/pull/36/commits/4ff39cae7101fc65b6e49c8cb67c3a6eabe4e4b0? Does this remove the need for a
shrinkToFitfunction in JS?Separate question that came to mind while fiddling with css: do you recall why
.sticky-col-stackhasdisplay: grid?Originally posted by @andrewpbray in https://github.com/qmd-lab/closeread/issues/36#issuecomment-2195796001
James:
4ff39ca could help with the occasional layout spill, although I still think we can mostly tackle it through container units and setting width appropriately on images! But when a spill does happen, we want it to just be visual (the content extends beyond the edge of the window visually) and not layout-wise: if the layout gets forced to be wider, that's when we start seeing scroll bars.
sticky-col-stack has display: grid to facilitate the Z-stacking. It happens the same way Reveal does it: it's (another) nested grid layout where everything is put into the same row and column track (hence the grid-area: 1 / 1 and margin: auto on .sticky-col-stack [data-cr-id]) 😊