1960636 - Reader mode CSS should limit the size of inline svg, similar to inline emoji images

Status: NEW

(Toolkit :: Reader Mode, defect, P3)

Description

[:Gijs (he/him)]

Originally reported in https://github.com/mozilla/readability/issues/965 .

Testcase: https://edanparker.hashnode.dev/going-a-little-further

The markup for the headings is something like:

<h1 id="heading-intro" class="permalink-heading">
<a class="permalink-heading-button" title="Permalink" style="height: 38.8833px;" href="#heading-intro" data-clipboard-text="https://edanparker.hashnode.dev/going-a-little-further#heading-intro">
<span class="hidden">Permalink</span>
<svg class="h-4 w-4 fill-current dark:text-white" viewBox="0 0 512 512"><path d="[elided]"></path></svg>
</a>
<strong>Intro</strong>
</h1>

I think we should probably try to extend https://searchfox.org/mozilla-central/rev/56117379696ea0cffb94cd09c14cd022a8c5e4e8/toolkit/themes/shared/aboutReader.css#1162-1172 to more extensively cover images/svg used in inline contexts.