quarto-dev / quarto-dev/quarto-cli

Improve image layout in hover box for cross-reference

Open
#9,950 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement html themes
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

The below CSS rule fixes the "white space" left in the hover container beside the image.
It needs further testing to ensure it does not lead to spurious display.

.tippy-content img {
    width: 100% !important;
}

Originally posted by @apcamargo in https://github.com/quarto-dev/quarto-cli/discussions/9888#discussioncomment-9682762

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the hover-box styles for the .tippy-content img selector and reproduce a cross-reference with an image. Test the proposed layout change against image and non-image hover content; done means the unwanted whitespace is removed without causing spurious display.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.