Maintain 12 columns per row in the layout

[jcoyne]

This fixes the problem where the subheader was not aligning with the toolbar.

The previous margin was added #654 to keep the leftside mini-toolbar from crashing into the panels. But we can accomodate for this by setting the right-margin of the rows in the content.

Before:

After:

This also prevents these bugs, where the toolbar or browsing can get stuck under the mini-menu.

Approved by Darcy https://stanfordlib.slack.com/archives/G018TJ20XGE/p1709655061981309?thread_ts=1709654314.383919&cid=G018TJ20XGE

[dnoneill]

Around 952 px I think the margins look a little weird. I think we need some clean up for larger screens to match what is on prod.

On this branch

On prod

[jcoyne]

@dnoneill I don't understand what you are asking me to do.

[dnoneill]

@jcoyne If you look at this branch the margins for the record view on a screen 952px don't look even. I think at a larger size there probably isn't a need for the margin-right css variable. I think we are going to want to mirror what is on production for some of the larger screen sizes. From around 822px to around 970px margins look a little odd and off balance (right much larger than left).

[jcoyne]

margins for the record view on a screen 952px don't look even

I think that's the change that was necessary so that the mini-menu doesn't collide with the stuff in the middle. I'm not sure how to have it both ways.

[dnoneill]

What if the margin is changed to margin: 0px calc(-30px * .5 + 35px); So that you have equal margins on either side?

I am including some phone screenshots to compare.

This branch:

With margin set to margin: 0px calc(-30px * .5 + 35px);

With margin set to margin: 0px calc(-30px * .5 + 35px); and .content padding set to 0

[jcoyne]

@dnoneill that feels like we're not taking advantage of all the available real-estate, making the design look more cramped than necessary.

[dnoneill]

@dbranchini Do you have an opinion on this?

[dbranchini]

Out of all of the screenshots, I like the third example best, but I also see Justin's point and wonder if the left and right margins could be smaller. I suppose they can't because you're providing room for the side toolbar. In an ideal world, I'd prefer that the side toolbar overlap the content or (even better) was collapsible into a single button (like Material's floating action button). When I look at it on my phone in production, it does seem to overlap some content (not consistently), but there also seems to be a horizontal scroll too? The up/down button on the search results page also seems to overlap content.

don't remember blockers