This is mostly an issue for Lessons. With a screen narrower than 800 px, the top part of the screen is position: fixed. The main body is positioned below it using a large top margin. This requires the heading area to be exactly the number of pixels used for the margin. But if a title is very long, so it overflows onto a second line, there can be overlap between the header area and the main body of the tool.
For the moment I'm dynamically positioning the main body with Javascript, using the actual height of the header. But there's got to be a better approach.
This is mostly an issue for Lessons. With a screen narrower than 800 px, the top part of the screen is position: fixed. The main body is positioned below it using a large top margin. This requires the heading area to be exactly the number of pixels used for the margin. But if a title is very long, so it overflows onto a second line, there can be overlap between the header area and the main body of the tool.
For the moment I'm dynamically positioning the main body with Javascript, using the actual height of the header. But there's got to be a better approach.