nav#TOC max-width bug?

[notinaboat]

It looks like applying max-width: var(--main-width); to nav#TOC on line 881 might be an error.

It overwrites the calculated max-width from line 820.

With line 881, I have problems with the contents pane interfering with image placement in the main document.
When I delete line 881 the problems go away.

pandoc-markdown-css-theme/docs/css/theme.css

Lines 879 to 885 in 4b92524

	@media screen and (min-width: calc(745px + 2 * (52px + 206px + 52px))) {
	header,
	nav#TOC,
	main,
	footer {
	max-width: var(--main-width);
	}

pandoc-markdown-css-theme/docs/css/theme.css

Lines 795 to 823 in 4b92524

	@media screen and (min-width: calc(745px + 2 * (52px + 206px + 52px) - 1px)) {
	header {
	margin-bottom: var(--line-height);
	}
	.date.before-toc {
	padding-bottom: initial;
	}
	nav#TOC {
	/* Unset some styles for small screen width */
	margin-bottom: initial;
	border-left: initial;
	padding-left: initial;
	position: sticky;
	margin-top: calc(var(--nav-toc-baseline-offset));
	float: left;
	top: var(--line-height);
	font-size: var(--nav-toc-font-size);
	color: var(--color-text-secondary);
	margin-left: var(--line-height);
	max-width: calc((100vw - var(--main-width)) / 2 - 2 * var(--line-height));
	max-height: calc(100vh - 2 * var(--line-height));
	overflow-y: scroll;
	}

[jez]

Thanks for the report. Can you provide an HTML file and screen shot so that I can reproduce? (I'm unlikely to make or accept changes to this until I can reproduce the bug.)

[notinaboat]

Hi @jez, I'm working on client-confidential documentation so I can't send files and screenshots and I won't have time in the next week to try to reproduce the problem with a dummy document.

What I can tell you is:

• I had a large (1500px wide x 2200 px high) diagram near the top of the page.
• I have a lot of entries in the TOC pane, some with long-ish names.
• The TOC pane was interfering with the large image and causing it to move down, leaving a huge white-space between the image and the text above it.
• I have modified the width variables like this:

    --main-width: 900px;
    --main-width-narrow: 745px;

... and I have tweaked places where you noted that the variables are not in scope like this:

diff --git a/docs/css/theme.css b/docs/css/theme.css
index 26b4858..d815d7e 100644
--- a/docs/css/theme.css
+++ b/docs/css/theme.css
@@ -222,7 +222,7 @@ label.sidenote-number {
 /* Unfortunately, variables aren't in scope here.
  * See calculations in Horizontal layouting.
  */
-@media screen and (max-width: calc(26px + 550px + 26px + 169px + 26px - 1px)) {
+@media screen and (max-width: calc(26px + 745px + 26px + 169px + 26px - 1px)) {
   .margin-toggle:checked + .sidenote,
   .margin-toggle:checked + .marginnote {
     margin-top: var(--side-note-line-height);
@@ -794,7 +794,7 @@ nav#TOC > input:checked + ul {
  * 52px = 2 * --line-height
  * 206px = side note min width
  */
-@media screen and (min-width: calc(745px + 2 * (52px + 206px + 52px) - 1px)) {
+@media screen and (min-width: calc(900px + 2 * (52px + 206px + 52px) - 1px)) {
   header {
     margin-bottom: var(--line-height);
   }
@@ -878,9 +878,8 @@ nav#TOC > input:checked + ul {
  * 52px = 2 * --line-height
  * 206px = side note min width
  */
-@media screen and (min-width: calc(745px + 2 * (52px + 206px + 52px))) {
+@media screen and (min-width: calc(900px + 2 * (52px + 206px + 52px))) {
   header,
-  nav#TOC,
   main,
   footer {
     max-width: var(--main-width);
@@ -935,7 +934,7 @@ nav#TOC > input:checked + ul {
  * 52px = 2 * --line-height
  * 206px = side note min width
  */
-@media screen and (min-width: calc(52px + 745px + 52px + 206px + 52px)) and (max-width: calc(745px + 2 * (52px + 206px + 52px) - 1px)) {
+@media screen and (min-width: calc(52px + 900px + 52px + 206px + 52px)) and (max-width: calc(900px + 2 * (52px + 206px + 52px) - 1px)) {
   header,
   nav#TOC,
   main,
@@ -998,7 +997,7 @@ nav#TOC > input:checked + ul {
  * 26px = --line-height
  * 169px = side note min width narrow
  */
-@media screen and (min-width: calc(26px + 550px + 26px + 169px + 26px)) and (max-width: calc(52px + 745px + 52px + 206px + 52px - 1px)) {
+@media screen and (min-width: calc(26px + 745px + 26px + 169px + 26px)) and (max-width: calc(52px + 900px + 52px + 206px + 52px - 1px)) {
   header,
   nav#TOC,
   main,
@@ -1044,7 +1043,7 @@ nav#TOC > input:checked + ul {
 /* Unfortunately, variables aren't in scope here.
  * See calculations above.
  */
-@media screen and (max-width: calc(26px + 550px + 26px + 169px + 26px - 1px)) {
+@media screen and (max-width: calc(26px + 745px + 26px + 169px + 26px - 1px)) {
   header,
   nav#TOC,
   main,