Debug Log: Scrollbar affecting layout issue

Used overflow-y: auto; scrollbar-gutter: stable, then switched to using css borders for the outlines, so that if the scrollbar appears, it would appear outside the calendar.

Put scrollbar-gutter: stable on both the day of week section, and on each row.

At first I ran into the issue of there being a gap at the right when there was no scroll bar. I was initially using grid gaps and having a grid background color of the outline. I replaced the gaps with borderRight instead. I realized that if I added the borderRight even on the rightmost box, the scrollbar would look like it was outside the row, even though it was actually inside.

This way the styling still looks consistent, and the scrollbar doesn't affect the layout.

Before:

After

Lessons learned:

• I also tried to use subgrid to fix this problem. I figured that if children followed the parents gridlines, if one of the subgrids had a scrollbar, the children's lines would still match the parents.
  • This was wrong. Turns out grid-template-columns: subgrid works more like inherit, since with the scrollbar, that grid lines of the scroll container did not match those of the parent grid which had no scrollbar.
• Learned that scrollbar-gutter should be considered in places where you need a consistent layout and you are using overflow: auto