<p></p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/mmd-osm/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/mmd-osm">@mmd-osm</a> I updated PR so that now <code class="notranslate">10 rem</code> (about 7.5 paragraph lines) of content is shown when the entry is collapsed. If entry is shorter, it doesn't leave any redundant gaps. I needed to add 2 lines of custom CSS as Bootstrap Accordion doesn't support behavior of showing any content when collapsed (it sets <code class="notranslate">display: none</code>). The only downside of the current solution is that when entry is less than 7 lines, accordion button is still shown but clicking it doesn't change anything. The only fix (based on limited functionality of Bootstrap Accordion) can be made by adding custom JS code. From my experience, we try to avoid adding additional JS code. If it is okay to add one for this functionality, I can add it too.</p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/tomhughes/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/tomhughes">@tomhughes</a> I implemented solution suggested by you. I found some issues opened about Bootstrap CSP errors (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="290324033" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/25394" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/25394/hovercard" href="https://github.com/twbs/bootstrap/issues/25394">twbs/bootstrap#25394</a>), but even <a href="https://getbootstrap.com/docs/5.0/customize/overview/#csps-and-embedded-svgs" rel="nofollow">Bootstrap 5 mentions</a> that some of their functionality uses <code class="notranslate">data:</code> in image urls. As mentioned in <a href="https://security.stackexchange.com/questions/94993/is-including-the-data-scheme-in-your-content-security-policy-safe/167244#167244" rel="nofollow">Stackexchange</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_as_an_Image#restrictions" rel="nofollow">MDN</a> adding <code class="notranslate">data:</code> as <code class="notranslate">background-image</code> or other image source doesn't raise any risks. Therefore, if we don't have extremely strict CSP policy, we can use solution suggested by you.</p>
<p dir="auto">Thank you for reviewing</p>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/5103#issuecomment-2309682435">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLNH65TPHWYFETJERGTZTLTSDAVCNFSM6AAAAABM36FKZGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMBZGY4DENBTGU">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLK6Z353B7WXDJJUBVDZTLTSDA5CNFSM6AAAAABM36FKZGWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTUJVL2QG.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/pull/5103/c2309682435</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/5103#issuecomment-2309682435",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/5103#issuecomment-2309682435",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>