readthedocs/sphinx_rtd_theme

Use flexible layout for hlist directives

Open

#1,108 opened on Apr 1, 2021

View on GitHub
 (1 comment) (0 reactions) (0 assignees)CSS (3,473 stars) (1,413 forks)batch import
AcceptedBugDesignGood First IssueNeeded: patch

Description

Problem

The current hlist can look bad on mobile or when using many columns.

Reproducible Project

https://docs.blender.org/api/current/bpy.types.AlphaUnderSequence.html

Error Logs/Results

image

As you can see the list items extend beyond viewport when the viewport is narrow.

Expected Results

The columns should break into new rows.

Environment Info

  • Python Version: 3.9.x
  • Sphinx Version: 3.5.1
  • RTD Theme Version: 0.5.1

Contributor guide

Tech stack
csshtml
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
CSS flexboxSphinx theme structure
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85
Research direction
In the sphinx rtd theme, the hlist directive renders columns using a fixed width. To fix the overflow on narrow viewports, modify the CSS for `.hlist` to use `display: flex; flex wrap: wrap;` instead of the current column layout. Examine the theme's CSS files (e.g., `sphinx rtd theme/static/css/theme.css`) for the hlist styles and apply the flexible layout. Test with a narrow viewport to ensure items wrap correctly.