The issue has been closed

Way to view code blocks with loooong lines better #1515

janpio posted onGitHub

Code blocks with long lines (as they appear in stack traces and similar) are shown with a scroll bar on Github:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

That, combined with the 700px width of the comments makes it very hard to get an overview of the actual content.

It would be awesome if something like a "fullscreen" button would appear in the top right of the code block that e.g. takes the code block out of the comment box and lets it use the full screen width.

Bad mockup: (Uses width:1800px; position:relative; left:-480px; to simulate the effect)

Maybe this could also be dynamic so it just uses the size it needs to the lines be fully displayed.

If the total screen width still is not enough, it would still show the scrollbar of course.

I think the "toggle wrap" button is the best solution here and it's already offered as a userscript: https://greasyfork.org/en/scripts/18789-github-toggle-code-wrap

More often than not, when I see auto-wrapped pre content it makes zero sense because the indentation is not followed.

Example:

<li className={`list-group-item js-notification js-navigation-item unread ${type}-notification rgh-unread`}>
    <span className="list-group-item-name css-truncate">
        <span className={`type-icon type-icon-state-${state}`}>
            {stateIcons[type][state]()}
        </span>
        <a className="css-truncate-target js-notification-target js-navigation-open list-group-item-link" href={url}
            data-hovercard-url={`${url}/hovercard?show_subscription_status=true`}>
            {title}
        </a>
    </span>
    <ul className="notification-actions">
        <li className="delete">
            <button className="btn-link delete-note">
                {icons.check()}
            </button>
        </li>
        <li className="mute tooltipped tooltipped-w" aria-label={`${type === 'issue' ? 'Issue' : 'PR'} manually marked as unread`}>
            {icons.info()}
        </li>
        <li className="age">
            <relative-time datetime={date} title={dateTitle}/>
        </li>
        <div className="AvatarStack AvatarStack--three-plus AvatarStack--right clearfix d-inline-block" style={{marginTop: 1}}>
            <div className="AvatarStack-body tooltipped tooltipped-sw tooltipped-align-right-1" aria-label={usernames}>
                {avatars}
            </div>
        </div>
    </ul>
</li>

vs wrapped (pre-wrapped to 50ch to better show the issue):


<li className={`list-group-item js-notification 
js-navigation-item unread ${type}-notification 
rgh-unread`}>
    <span className="list-group-item-name 
css-truncate">
        <span className={`type-icon type-icon-state-
${state}`}>
            {stateIcons[type][state]()}
        </span>
        <a className="css-truncate-target js-
notification-target js-navigation-open list-
group-item-link" href={url}
            data-hovercard-url={`${url}/hovercard?
show_subscription_status=true`}>
            {title}
        </a>
    </span>
    <ul className="notification-actions">
        <li className="delete">
            <button className="btn-link delete-note">
                {icons.check()}
            </button>
        </li>
        <li className="mute tooltipped tooltipped-w"
aria-label={`${type === 'issue' ? 'Issue' :
'PR'} manually marked as unread`}>
            {icons.info()}
        </li>
        <li className="age">
            <relative-time datetime={date} title={
dateTitle}/>
        </li>
        <div className="AvatarStack AvatarStack--
three-plus AvatarStack--right clearfix d-inline
-block" style={{marginTop: 1}}>
            <div className="AvatarStack-body tooltipped
tooltipped-sw tooltipped-align-right-1" aria-
label={usernames}>
                {avatars}
            </div>
        </div>
    </ul>
</li>

posted by fregante over 5 years ago

Totally valid to close this, as wrapping definitely is not the solution.

I still hope some day I find a way to expand the width of code blocks to full width by clicking a button and break out of the limiting column width. Right now I have no idea how to do that though :/

posted by janpio over 5 years ago

If you have Stylus/Stylish installed, you can use this style: https://userstyles.org/styles/108591/github-wide

posted by Mottie over 5 years ago

Thanks. I prefer the narrow columns in general, but want to break out of them (just the code block) on demand (in the best case). That seems a bit more complicated ;)

posted by janpio over 5 years ago

Fund this Issue

$0.00

Funded

Pull requests

Way to view code blocks with loooong lines better #1515

Company

Community

Support

Connect