When I have a clerk/row where items in the row have a min. width that exceeds the row/column width, the row gets a horizontal scrollbar due to overflow. So far this is fine (although sometimes I would like the row to wrap into multiple lines, but that may need a different viewer).
But when I nest that row inside a clerk/col, the first few items in the row will be cut off since the row (as a flex item inside the col) will get justify-content: center applied to it.
Here is a mockup:
(def box
(clerk/html
[:svg {:width "100px" :height "100px" :xmlns ""}
[:rect {:x "0" :y "0" :width "100%" :height "100%" :fill "black"}]
[:line {:x1 "0" :y1 "0" :x2 "100%" :y2 "100%" :stroke "red"}]
[:line {:x1 "100%" :y1 "0" :x2 "0" :y2 "100%" :stroke "red"}]]))
;; Works fine:
(clerk/row (repeat 8 box))
;; Breaks:
(clerk/col
(clerk/row (repeat 8 box))
"Box row in a column")
Setting CSS properties in :nextjournal/render-opts will only affect the whole column viewer, not the flex items inside of it, so I cannot overwrite the centering from there - I guess?
Is there another option? My use-case here was to create a row of SVG visualizations (that need to have a fixed width) with a single caption below it, hence the column. I know that I can always use clerk/html, but I wanted to see if I encountered an issue that others may also run into.I think I fixed it by setting the overflow property on the row CSS to auto. This made the bottom scrollbar disappear and restores it on the actual row where it belongs. I still have to find out why this works though or if it would work in general, before making a PR or something.
(clerk/col
(apply clerk/row
{:nextjournal/render-opts {:overflow "auto"}}
(repeat 8 box))
"Box row in a column")