Bottom part of options unselectable/unclickable on certain screen widths

[samccann]

First reported in ansible/ansible#77714 and moved here:

Summary

Some links on docs.ansible.com are unclickable. I think it is specific to this combination:

• The documentation of an option has a link
• The link is near the bottom of the option
• It isn't the last option
• Browser size is less than 1200px wide (mine is ~1040)

I encountered this on https://docs.ansible.com/ansible/latest/collections/community/docker/docker_prune_module.html (specifically containers_filters, images_filters and networks_filters, but not volumes_filters), but since the CSS applies to everything, I'm reporting it here.

(ignore that the link is purple in the screenshot, I opened it from the inspector)

Trying to inspect the link actually gives you the div class="ansibleOptionAnchor" of the next option, which is probably why on that page it works for volume_filters.

Looking further into it, it also makes text near the bottom of any item (except the last item) unselectable; the cursor remains a pointer instead of turning into a caret.

There are multiple CSS min/max width statements going on, also on elements higher up in the tree (especially the td). Involved CSS files appear to be (at least) https://docs.ansible.com/ansible/latest/_static/css/ansible.css and https://docs.ansible.com/ansible/latest/_static/antsibull-minimal.css but I have no idea where those are coming from.

Issue Type

Documentation Report

Component Name

CSS

Ansible Version

$ ansible --version

Configuration

$ ansible-config dump --only-changed

OS / Environment

Firefox 99.0.1 on Archlinux

Additional Information

It improves the user experience.

(feel free to edit the title and/or move this to the relevant repository)

Code of Conduct

• I agree to follow the Ansible Code of Conduct

[samccann]

Verified this by shrinking the browser until the list version of parameters shows up.

[felixfontein]

This happens with antsibull + the ansible sphinx theme, but not when antsibull is used with the RTD standard theme. Also the browser window inner width must not be too small, for me it has to be at least ~753 pixel. If it's less it works again, same as with widths larger than 1200 px.

[felixfontein]

This is caused by: https://github.com/ansible-community/sphinx_ansible_theme/blob/main/sphinx_ansible_theme/static/css/ansible.css#L468-L471 Unfortunately without that, linking to options no longer works on these screen widths, as they will be hidden by the header bar.

[felixfontein]

Ok, so this is definitely a problem with the theme, not with antsibull.

[samccann]

Are you up for moving the issue there with appropriate details?

[felixfontein]

This would probably be resolved by #41 :)

[felixfontein]

That should be fixed by today's sphinx-ansible-theme release (0.10.2).