inline-block

[Mottie]

For some silly reason, I can't seem to log into GitHub in Firefox so I can't test to see why this hack for Firefox is necessary.

  /* HACK: Fix annoying text selection bug in Firefox */
  .markdown-body code, .markdown-body tt {
    padding: 0 .2em !important;
    display: inline-block !important;
    border: 1px solid #383838 !important;
  }

Anyway, the display: inline-block is causing this problem in my feed:

If I turn off just that setting, everything looks good again:

[silverwind]

Is that in Chrome? I never noticed any issue on these in Firefox.

The hack is necessary because of a Firefox bug, but there may be ways to make it more compatible.

[Mottie]

Yeah, Chrome... but I think it's only an issue when the ellipsis is inside of a code tag.

[silverwind]

Hmm, care to post the html of that tag?

[Mottie]

<div class="alert issues_comment">
    <div class="body"><!-- issue_comment -->
        <span class="mega-octicon octicon-comment-discussion"></span>

        <div class="time">
            <time datetime="2015-04-04T12:34:36Z" is="relative-time" title="Apr 4, 2015, 7:34 AM CDT">6 hours ago</time>
        </div>

        <div class="title">
            <a href="https://github.com/hynese" data-ga-click="News feed, event click, Event click type:IssueCommentEvent target:actor">hynese</a> <span>commented</span> on issue <a href="https://github.com/Mottie/tablesorter/issues/859#issuecomment-89561021" data-ga-click="News feed, event click, Event click type:IssueCommentEvent target:issue-comment" title="No display table header/filter/sorter when used columns selector">Mottie/tablesorter#859</a>
        </div>

        <div class="details">
            <a href="https://github.com/hynese"><img alt="@hynese" class="gravatar" data-user="315697" height="30" src="https://avatars2.githubusercontent.com/u/315697?v=3&amp;s=60" width="30"></a>
            <div class="message markdown-body">
                <blockquote>
                    <p>I also have a problem with no sort icons: <a href="https://cloud.githubusercontent.com/assets/315697/6992591/27fd1ad0-dacf-11e4-9318-e5d8dfed41e3.png" target="_blank"></a> I'm using clean HTML. I have the bootstrap theme. widgets.js enabled. Here's what I use to sort: <code> theme:…</code></p>
                </blockquote>
            </div>
        </div>
    </div>
</div>

[silverwind]

Does a white-space: nowrap help?

[Mottie]

I finally got to log into Firefox... darn 2-step authenication is a pain LOL

I don't see the GitHub-Dark theme definitions in the Firefox inspector - that's so odd.

Anyway, adding white-space: nowrap to Chrome does this:

[silverwind]

That's https://bugzilla.mozilla.org/show_bug.cgi?id=936768 :P

Also, I reproduced with pasting your html, investigating...

[silverwind]

Strange, that ellipsis looks to be a unicode one, not text-overflow:ellipsis

[Mottie]

Yeah, I think they manually add it for the feed.

[silverwind]

Removing content from both ::before and ::after seems to fix it.

[Mottie]

Well, so does removing the inline-block... is that needed?

[silverwind]

Yes, I had a specific reason for that, but I don' remember :)

[Mottie]

😝

[silverwind]

Please retest!