Left navigation gets stepped on with mkdocs-material blog feature, for full blog posts, at wide resolution

[bcotton]

I'm using the new 1.3 version of this plugin, which enables the mkdocs-material blog plugin.

My mkdocs.yaml file looks like this:

site_name: 'Internal Blog for Bob Cotton'

theme:
  name: material
  features:
    - navigation.sections
nav:
  - Home: 'index.md'
  - Blog:
     - 'blog/index.md'

plugins:
  - techdocs-core
  - blog:
      post_url_format: "{date}/{slug}"

When the site get rendered, both under our backstage instance, and using techdocs-cli everything looks great, The nav on the left is correct. All the blog features are working.

Except when you drill down into a full blog post ("continue reading" or click on a post header) and you have your screen resolution fairly wide (anything wider than when the hamburger gets rendered on the right side)

When looking at the list of posts, the left nav is great:

However, when you select, or link directly to a post, the left-hand navigation get smashed into the content. e.g.

When run under the techdocs-core container, without the backstage wrapper, it looks like this:

I've created a repo with content and instructions to reproduce the issue https://github.com/bcotton/techdocs-blog-testing

Not a front-end dev, so poking in the dark here, however, Looking at chrome dev-tools, if I disable

.md-sidebar {
  position: fixed;
}

Then it's lays out correctly

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[brianphillips]

This would be nice to fix up. We have some interest in having an easy-to use blog in our org but this isn't usable in its current form.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[brianphillips]

This is still an issue

[awanlin]

Hi @bcotton and @brianphillips, is this truly an issue in this repo or is it really something that needs to be fixed in the main Backstage repo? The code for this does seem to be over there:

https://github.com/backstage/backstage/blob/30f11804b9a5c64605d5c3416dc009d18abece76/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts#L66-L74