Fixed build results page on firefox (part two)

[jaraco]

This PR builds on and obviates #2350 by addressing concerns about aesthetics on Chrome, by moving the hack into its own documented style definition.

I did try to track the origin of the original style, but it was part of the bulk commit in a95f08d, which lends no insight into the intention of the style, and is probably just an artifact of the author using Chrome to develop the view.

[agjohnson]

I'd rather avoid using CSS hacks here. Was there any attempt to rework the styling around the parent elements to remove the need for a negative margin in the first place?

[jaraco]

I agree it would be preferable without CSS hacks, but I don't have the skills to track down the underlying cause readily. At least this change makes the site usable and sets the stage for someone to devise a better option.

[jaraco]

I should mention that this fixes #2261.

[jaraco]

As proposed in the ticket, I've removed the hack and the display: block apparently implicated in the poor rendering on Chrome. According to the comment in the ticket, this should resolve the issue. I have not tested the result.

[hwine]

@agjohnson what more needs to be done here? This has been open for a long time.

[agjohnson]

It needs testing. Someone tried a similar fix and it broke all other browser display. Can anyone confirm this works across browsers?

[jaraco]

In this comment, @karlcow asserts that the change has the desired effect. This PR implements that change.

[agjohnson]

This fix breaks scrolling on command elements, I can't scroll horizontally to see the command executed.

FWIW, FF quantum looks as I would expect

[jaraco]

This fix breaks scrolling on command elements, I can't scroll horizontally to see the command executed.

I still would argue that being able to see the header text is more important than being able to see the trailing portion of longer lines.

I'll see if I can find another solution.

[karlcow]

Let me check again. OK Indeed the change as it is will break the scroll. I have something which fixes it.

[karlcow]

@jaraco Could you try this in your PR.

Removing the overflow: hidden here

div.build-command div.build-command-run, div.build-command div.build-command-output {
	display: block;
	/* overflow: hidden; */
}

and just removing the margin-bottom: -16px

div.build-command div.build-command-run > span, div.build-command div.build-command-output > span {
	display: block;
	/* margin-bottom: -16px; */
	font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
	white-space: pre;
	overflow-x: scroll;
	overflow-y: hidden;
}

This will fix in both Chrome and Firefox.
It will increase the space for Chrome.

If I can try to work out a solution which would look the same in both with a change of markup.

[karlcow]

ok I have a fix which seems to be working everywhere but requires markup change.
in details.css

div.build-command div.build-command-run > pre, div.build-command div.build-command-output > pre {
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    overflow-x: scroll;
    overflow-y: hidden;
    line-height: 1.5em;
    margin: 0;
}

div.build-command div.build-command-output > pre {
    padding: .5em;
}

And replace the span with a pre

<div class="build-command build-command-successful"
    data-bind="css: command_status">
    <div class="build-command-run"
        data-bind="click: toggleCommand">
        <pre data-bind="text: command">python -mvirtualenv --no-site-packages /home/docs/checkouts/readthedocs.org/user_builds/gratipay/envs/latest</pre>
    </div>
    <div class="build-command-return"
        data-bind="visible: is_showing"
        style="">
        <div class="build-command-output">
            <pre data-bind="text: output">New python executable in /home/docs/checkouts/readthedocs.org/user_builds/gratipay/envs/latest/bin/python
Installing setuptools, pip, wheel...done.
</pre>
        </div>
        <div class="build-command-meta">
            <span class="build-command-time">
                Command time:
                <span data-bind="text: run_time">2</span>s
            </span>
            <span class="build-command-exit-code">
                Return:
                <span data-bind="text: exit_code">0</span>
            </span>
        </div>
    </div>
</div>

[karlcow]

horizontal scrolling is working. The layout is similar in both firefox and chrome.

[davidfischer]

I have an alternative fix in #3569 that doesn't require markup changes.

[agjohnson]

Thanks for the investigation and help on this PR everyone! I think #3569 is closer to a fix for this issue, so I'm going to close this PR and we can hopefully merge that PR after some more testing.