GitHub Wrapping off?

[AliAryanTech]

Select Topic Area

Issue

Body

Few days ago GitHub has been changed a little bit. I mean "warp code off" coz I mostly use GitHub with my phone chrome but now it feels hard to see code while warp is like that.. please change it back to old 🥲

• Still don't get it??
  Old GitHub be like:
  

Now GitHub be like:

[dannye]

This new word-wrap doesn't just affect mobile, but it affects desktop browsers too if you make the window narrow enough. It is objectively bad. I am begging for this to be reverted. Please just let me scroll to the right to see the code in context as-is.

[AliAryanTech]

So, we all are facing pretty bad situation.

🥴 Need Holidays from GitHub

[gusutabopb]

Horrible change. Please revert to old behavior ASAP!

Workaround for desktop for gists (source: https://www.bennadel.com/blog/4373-fixing-github-gists-sudden-case-of-line-wrapping.htm)

body .gist .blob-code-inner {
  white-space: pre ;
}

Edit:

For regular repo code (non-gist) pages, the following CSS override fixed it for me:

td.blob-code-inner {
  white-space: pre;
}

This also works:

/* No `.gist` */
body .blob-code-inner {
  white-space: pre;
}

I'm using the following browser extensions to override CSS:

• Stylebot for Chrome (desktop)
• Makeover for iOS

[AliAryanTech]

Where's GitHub mods, they're responsible for that!! 🥺🥲

[AliAryanTech]

Horrible change. Please revert to old behavior ASAP!

Workaround for desktop for gists (source: https://www.bennadel.com/blog/4373-fixing-github-gists-sudden-case-of-line-wrapping.htm)

body .gist .blob-code-inner {
  white-space: pre ;
}

Edit:

For regular repo code (non-gist) pages, the following CSS override fixed it for me:

td.blob-code-inner {
  white-space: pre;
}

This also works:

/* No `.gist` */
body .blob-code-inner {
  white-space: pre;
}

I'm using the following browser extensions to override CSS:

• Stylebot for Chrome (desktop)
• Makeover for iOS

This thing is only for PC user's, Phone user's know the true PAIN

[schardev]

It's been several days and this still hasn't been fixed. There isn't even an option in settings (web version) to disable this.

[AliAryanTech]

Indeed, I guess we should Mail GitHub for this issue 🤔🤔

[HemanthJabalpuri]

Horrible experience with word wrap

[AliAryanTech]

Indeed 🥺

[Defeatomizer]

Would be good if word wrapping was also disabled on some more text areas (for example, test logs on the checks page for commits or pull requests).

[AliAryanTech]

🤔 maybe

[Sushrut1101]

Horrible Change, too annoying for me

[AliAryanTech]

Indeed, it feels like a bad dream

[aaronriekenberg]

The GitHub app has an option (on iOS at least) under "View Code Options" to enable or disable line wrapping.

Would be great if GitHub web had a similar option, or at least default to old behavior of wrapping disabled.

FWIW I am using the app now to do mobile code browsing for this reason only.

[Sushrut1101]

Yeah, it's on Android too.
But unfortunately there's no such option in the Web Version

[AliAryanTech]

GitHub app, don't have many options as compared to chrome web. Which makes that app useless even with that wrapping option.

[Sushrut1101]

GitHub app, don't have many options as compared to chrome web. Which makes that app useless even with that wrapping option.

Yeah Exactly, that app is useless for me, I can only work on the web version

[badsyntax]

Have we got any feedback from GitHub devs? This change needs to be reverted. I worry GitHub aren't getting this feedback.

[badsyntax]

@AliAryanTech it's a spam bot. just ignore. i've reported the account.

[badsyntax]

In the past I have communicated with a GitHub front-end dev on twitter who was responsive, but i've completely forgotten their twitter handle :(

Well, you can search in your email might you find out his username there

i've managed to find the person on twitter and i've sent them a link to this discussion. hopefully they will respond.

[AliAryanTech]

@AliAryanTech it's a spam bot. just ignore. i've reported the account.

Ooh, I see
Thank you!!

[AliAryanTech]

In the past I have communicated with a GitHub front-end dev on twitter who was responsive, but i've completely forgotten their twitter handle :(

Well, you can search in your email might you find out his username there

i've managed to find the person on twitter and i've sent them a link to this discussion. hopefully they will respond.

Let hope together, they would fix this issue now 🥺
It's hard now to use GitHub with that interface..

[Sushrut1101]

In the past I have communicated with a GitHub front-end dev on twitter who was responsive, but i've completely forgotten their twitter handle :(

Sad :(

[Ray-Senpai07]

Man it's just what Microsoft think is good to do , don't debate we can't do anything 🤧

[AliAryanTech]

bruh, LoL?

[AliAryanTech]

Man it's just what Microsoft think is good to do , don't debate we can't do anything 🤧

at least we can report them it's not good so they would understand what we need and what they should do ..

[AliAryanTech]

How long we need to stay like this? When would this suffering ends?? 🗿

[falvarez1]

Any update on this? The line wrapping creates an amazingly poor user experience, either reverse it or give us the option to turn it off. 😩

[AliAryanTech]

I guess, GitHub admins went to holidays they didn't give us response yet 🥴

[falvarez1]

Bueller? Tagging some of the community contributors to try to get some visibility here since there hasn't been an official response.
I apologize in advance if I am tagging the wrong person, but I am trying to get the attention of the individuals responsible for the code wrapping feature on Github. I am unsure of who the correct point of contact is, and I am tagging a few people who I believe may be able to help here. If you are not the correct person but have insight into who is, it would be great to direct to the appropriate individual. Thank you for your time and assistance.
@queenofcorgis @natalierjackson @otter-computer @martinwoodward

[martinwoodward]

Sorry about that. Moved this one from the "Issues" category to "Repositories" so it gets the attention of the right folks and also pinged the team.

[martinwoodward]

Thanks for this - this team have identified the cause and will get to work on getting a fix out for the existing code view. The new code view will have a setting so that wrapping will able to be configured.

[dead10ck]

@martinwoodward just want to check in about this; several people have noticed that the wrapping was fixed in the regular code view, but diffs are still broken. Was this issue investigated?

[AliAryanTech]

GitHub, why this not fixed yet??

[Defeatomizer]

Should I ping the staff responsible for pull requests UX on my following discussion?

[dead10ck]

Pinging @martinwoodward. Mobile has been broken for 6 months now. To be quite frank, this is pretty unbelievable. This gives the distinct impression from the outside that no developers inside GitHub are dogfooding their own product.

[dead10ck]

Pinging again. It's quite unbelievable that GitHub has left the mobile web site broken for over a year now.

[AliAryanTech]

So, finally they fixed this issue after one month
By the way, thank you everyone for your support!🎉🎉

As we did much effort to get attention even though Email 🤧
Finally, Love GitHub ❤‍🔥

[dannye]

I'm confused. A few of you are saying it is fixed but it does not appear fixed.

Diffs are still completely unreadable.

[AliAryanTech]

reality, always PAINFUL

[falvarez1]

I'm confused. A few of you are saying it is fixed but it does not appear fixed.

It's not fixed yet but they mention that they've identified the issue and are currently working on a fix. I'm sure it'll be included in their next sprint cycle 🤞.

[AliAryanTech]

If you join there new code interface, you would realized big change. I mean this issue resolved

[badsyntax]

@AliAryanTech does the "new code interface" work when viewing a commit on mobile?

[AliAryanTech]

Nope, to be honest I'm not using "new interface" ... although, they're doing improvement so you can message here

[badsyntax]

While this is fixed when viewing a file, it's not fixed when viewing a commit, for example:

[dannye]

Yeah. I'm rather irritated that this issue is marked as "answered" even though the main use-case I have cared about since the beginning of the thread has not been fixed at all.

[Defeatomizer]

I have opened a discussion especially for cases with pull request diff views like this.

[dannye]

Thank you

[jeremysawesome]

This has annoyed me for a while, so I created a bookmarklet:

This will unwrap the lines, but the green/red diff backgrounds still stop at the same places

javascript:(function(e){let t=e.createElement("style");e.head.appendChild(t),t.sheet.insertRule(".soft-wrap .blob-code-inner, .js-blob-wrapper .blob-code-inner { white-space: pre !important; }")})(document);

Note: The javascript above should be in the URL field of the bookmark

Desktop

On desktop you can add this to your bookmark bar and click it to easily unwrap code.

Mobile - Android

Add this as a bookmark (if it helps save the current page as a bookmark, then edit that bookmark and add the js as the url).

• Search for the bookmark name in your address bar to apply it to the page (https://paul.kinlan.me/use-bookmarklets-on-chrome-on-android/)

This will unwrap the code for you on mobile(android) and desktop

[jeremysawesome]

Works on Desktop

[jeremysawesome]

I don't have a Gif recorder on my phone, but I've documented the steps in images.

See Annoying Line Breaks in PR

Search for GH Unwrap bookmarklet and tap it

GH Code is unwrapped on mobile

(you might need to zoom in though 😄 )

[AliAryanTech]

We do have some Pro here, thanks for your contribution and helping everyone. 🎉❤️

[Sushrut1101]

@martinwoodward Can this please be also fixed in Commit diffs ? Thanks in Advance!

[AndreKR]

Is this about viewing diffs or about viewing files?

[AliAryanTech]

viewing files, back in the days

but we also talked about viewing diff

[ravenblackx]

I made a tiny Chrome extension to fix this since apparently github has no intention to. (It just injects a few lines of css, no javascript.)

[argmaxmax]

Using open source user script firefox extension Violentmonkey on both desktop and mobile firefox, I adapt github pages using the following user script:

// ==UserScript==
// @name        New script github.com
// @namespace   Violentmonkey Scripts
// @match       https://github.com/*
// @grant       none
// ==/UserScript==
const style = {
  '.blob-code-inner.blob-code-marker ': {
    'white-space': 'pre',
  },
  '.js-file-content': {
    'overflow': 'auto',
  },
};

const setStyles = () => Object.entries(style).forEach(([ selector, declarations ]) => {
  document.querySelectorAll(selector).forEach((element) => {
    Object.entries(declarations).forEach(([ property, value ]) => {
      element.style.setProperty(property, value, 'important');
    });
  });
});

(new MutationObserver(setStyles)).observe(document.body, { childList: true, subtree: true });

setStyles();

Results

No I can scroll in peace:

[GalaxySnail]

Thanks for your script! It works perfectly with diffs in PRs. However, it doesn't work with diffs on commit pages. Adding the following styles makes it work on commit pages too:

const style = {
    ...
    '.diff-text-inner': {
        'white-space': 'pre',
    },
    'table.tab-size.width-full': {
        'overflow': 'auto',
        'display': 'block',
    },
}