Code block annotations are misaligned on mobile

[Andre601]

• I've read the contribution guidelines and agree with them

I've found a bug and checked that ...

• ... the problem doesn't occur with the default MkDocs template
• ... the problem is not in any of my customizations (CSS, JS, template)
• ... the documentation does not mention anything about my problem
• ... there are no open or closed issues that are related to my problem

Description

The examples about code block annotations on the material insider page is misaligned (see image).

Expected behavior

Text should be aligned properly.

Actual behavior

The text shows up on the right cut off

Steps to reproduce the bug

1. Go to https://squidfunk.github.io/mkdocs-material-insiders/reference/code-blocks/#adding-annotations
2. Tab on one of the annotations
3. See issue

Package versions

Since this happens on the live version of the insiders example can I not provide the info.

• Python: python --version
• MkDocs: mkdocs --version
• Material: pip show mkdocs-material | grep -E ^Version

Project configuration

The contents of your mkdocs.yml

System information

• OS: Android 10
• Browser: Google Chrome

[squidfunk]

Thanks for reporting! There're still some issues to work out in regards to sizing and alignment on mobile, that's correct. This is why the feature is still considered experimental. It already works very well in many circumstances, but as always, there are some edge cases to consider. The currently known bugs are:

1. Annotations may sometimes run out-of-screen on mobile (this is the issue reported in the OP)
2. Annotations may be rendered too narrow
3. When scrolling a code block, annotations stay in place and don't follow

I've already implemented an alignment logic, but it seems to still suffer from some issues. Nothing that isn't fixable, but it definitely needs some work on mobile. I'm actually working on a general tooltip alignment solution because I want to expand those annotations/tooltips beyond code blocks, to be peaceable anywhere inside body copy.

Screenshots for issue 2 and 3:

[jj-jitterbit]

In this file
https://github.com/squidfunk/mkdocs-material-insiders/blob/master/docs/reference/code-blocks.md
there is a typo:

2. Annotations can be __placed anywhere__ in a code block were a comment for the
   underlying language can be placed. 

should be "where a comment":

2. Annotations can be __placed anywhere__ in a code block where a comment for the
   underlying language can be placed. 

[squidfunk]

I've finally tackled the reported issues with code annotations – they now work quite well on mobile:

Ohne.Titel.mp4

The fixes were just released as part of 8.0.0b2. See #3219 for update instructions.

[squidfunk]

The fix is now in master and will be released shortly.