Bug on gist.github.com: Gist description not correctly truncated if it contains an URL

Hi!

I would like to report a visual bug on my personalized https://gist.github.com/ homepage I noticed. Here’s the screenshot showing the problem:

It seems that the bug demonstrated by the Gist https://gist.github.com/generalmimon/54d3a53d1cdfaa4e4d594d36035f077a is caused by the URL contained in the description of the particular Gist, which has been automatically converted to a hyperlink upon creation.

Here’s the specific HTML markup of the problematic Gist list item on my gist.github.com homepage:

          <li class="flex-auto mr-3 d-md-flex d-none">
              <svg height="16" class="octicon octicon-code-square mr-2 mt-1 float-left" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path fill-rule="evenodd" d="M1.75 1.5a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25V1.75a.25.25 0 00-.25-.25H1.75zM0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0114.25 16H1.75A1.75 1.75 0 010 14.25V1.75zm9.22 3.72a.75.75 0 000 1.06L10.69 8 9.22 9.47a.75.75 0 101.06 1.06l2-2a.75.75 0 000-1.06l-2-2a.75.75 0 00-1.06 0zM6.78 6.53a.75.75 0 00-1.06-1.06l-2 2a.75.75 0 000 1.06l2 2a.75.75 0 101.06-1.06L5.31 8l1.47-1.47z"></path></svg>
            <a class="css-truncate d-block" href="/generalmimon/54d3a53d1cdfaa4e4d594d36035f077a">
              <span class="text-bold css-truncate-target">systemticks-payload-typeinfo.yml</span>
              <span class="f6 d-block css-truncate">
                  <span class="text-gray css-truncate-target">The recommended way of handling the situation described in <a href="https://www.systemticks.de/2020/06/09/dlt-parser-from-kaitai.html#known-issues-and-possible-improvements" rel="nofollow">https://www.systemticks.de/2020/06/09/dlt-parser-from-kaitai.html#known-issues-and-possible-improvements</a> using KSY</span>
              </span>
            </a>

          </li>

As you can see, the full description is simply pasted into the <span class="text-gray css-truncate-target"> element. However, the whole clickable part of the <li> is an <a class="css-truncate d-block" href="/generalmimon/54d3a53d1cdfaa4e4d594d36035f077a"> link pointing to the Gist page itself, and the problem occurs when there’s another nested <a> link in the description (which has been automatically created on detected URL).

HTML doesn’t allow nested links, and a HTML-compliant browser must convert such invalid markup to something like (copied from Chrome DevTools and prettified):

<li class="flex-auto mr-3 d-md-flex d-none">
  <svg height="16" class="octicon octicon-code-square mr-2 mt-1 float-left" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true">
    <path fill-rule="evenodd"
      d="M1.75 1.5a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25V1.75a.25.25 0 00-.25-.25H1.75zM0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0114.25 16H1.75A1.75 1.75 0 010 14.25V1.75zm9.22 3.72a.75.75 0 000 1.06L10.69 8 9.22 9.47a.75.75 0 101.06 1.06l2-2a.75.75 0 000-1.06l-2-2a.75.75 0 00-1.06 0zM6.78 6.53a.75.75 0 00-1.06-1.06l-2 2a.75.75 0 000 1.06l2 2a.75.75 0 101.06-1.06L5.31 8l1.47-1.47z">
    </path>
  </svg>
  <a class="css-truncate d-block" href="/generalmimon/54d3a53d1cdfaa4e4d594d36035f077a">
    <span class="text-bold css-truncate-target">systemticks-payload-typeinfo.yml</span>
    <span class="f6 d-block css-truncate">
      <span class="text-gray css-truncate-target">The recommended way of handling the situation described in</span>
    </span>
  </a>
  <a href="https://www.systemticks.de/2020/06/09/dlt-parser-from-kaitai.html#known-issues-and-possible-improvements" rel="nofollow">
    https://www.systemticks.de/2020/06/09/dlt-parser-from-kaitai.html#known-issues-and-possible-improvements
  </a>
  using KSY
</li>

which is exactly the behavior as described in the CSS Tricks article about Nested Links I’ve already linked.

So I’d suggest to just disable the URL to hyperlink conversion inside the Gist description anywhere if it’s contained inside an <a> already :slightly_smiling_face:, or strip all <a> HTML tags from the description (if the conversion is done before saving into the database).

Hmm, strange…it shows the url, and is different than the links…
Here, I will ask a question.

  • Has this happened before? Is this unusual?

I have no idea, I only use Gist occasionally. I see this for the first time, but I’ve never put a URL into any Gist description before, so it’s definitely possible that the bug has been around for some time.

This bug depends on two conditions which must apply simultaneously:

  1. auto-detected URLs in a Gist description on homepage are converted to links,
  2. the whole Gist description is clickable (i.e. contained in a HTML anchor element - <a>).

So if any of these features has been added recently, the bug has existed since then.

I’ve just verified that the bug still persists - and I’m sure it’s reproducible, so you can easily check it yourself too, @BosenChang. Just create a new Gist with this description:

The recommended way of handling the situation described in https://www.systemticks.de/2020/06/09/dlt-parser-from-kaitai.html#known-issues-and-possible-improvements using KSY

Then go back to the Gist homepage and see if the Gist you’ve just created is demonstrating the bug.