mdo / github-wide Goto Github PK

Since my screen is very wide, the default GitHub CSS can make images become very wide and therefore very tall. I find myself having to scroll to see the entirety of a screenshot from modern phones. The following CSS snippet appears to work for my use-case.

.markdown-body img {
    max-height: 60em; /* or ~800px */
}

Before

After

If you'd like, I can open a PR with this minor change.

While editing a Gist, the width is fine but the height could be taller. It currently shows around 20 lines.

GitHub seem to have released a small change yesterday which uses columns on the PR page. These two CSS declarations are now breaking the display:

/* Issues/PRs */
.discussion-sidebar {
  width: 280px !important;
}
.discussion-timeline {
  width: calc(100% - 300px) !important;
}

I've found just removing them seems to revert to the old behaviour 👍

Before

After

is there a way to enlarge the network graph?

That would be a big plus for readability

Example: syl20bnr/spacemacs#2688

If under Feature preview you enable New Code Search and Code View (Beta) then pages covered by this feature (such as blob URLs) are displayed in a narrow central column despite this style.

Something sets

max-width: 1280px;

https://github.com/apache/httpd/tree/9605760cff84574a013bf337f6cefae2b4f424f6 is fine but https://github.com/apache/httpd/blob/9605760cff84574a013bf337f6cefae2b4f424f6/CMakeLists.txt is not, for example.

Hi there!
As for now, with new GH interface, this style seems to be broken and does not work anymore.
Looks like it is needed to be updated...

// P.S. I not sure if I had enough time in near future, so don't rely on me, please. But I'll try to look into this when I'll have some spare time.

Here's a screenshot of a huge header after adding a comment:

Also, every time I try to click a button, the header grows larger and larger.

The README says

#### Stylus
Website: [Stylish](http://add0n.com/stylus.html)

#### Stylish
> Due to privacy concerns (extension has permission to all your browser data) Stylus is recommended.

Website: [userstyles.org](http://userstyles.org)

I find the above confusing. Under the "Stylus" header is a website named Stylish (with an address containing "stylus"), while under the "Stylish" header, Stylus is recommended, and the website has a name that is neither "stylus" nor "stylish".

Which one is recommended in the end?

Would be great if you would put this up on http://userstyles.org so it is updated/installable directly via the stylish addon

github-wide works like a charm for main content, but the header bars still have a min-width applied to them (the screenshot above is for a viewport which is slightly smaller than 980px). Would be great if those would be responsive for smaller widths too.

i see here that you are sporting a light header:

https://github.com/mdo/github-wide

however the default header is dark - if im not mistaken it was you yourself that
deployed the dark header:

https://twitter.com/mdo/status/830138373230653440

and now you are not using it?

Edit: I have just realised that I have posted in the wrong repo! I should have posted here. I have no idea if the same problem applies to this project or not!

Github recently made some small changes to the page we use to open a new pull request.

As a result, the text box is no longer wide, and sits on the far left, leaving a big empty gap on the right hand side.

I had a little play with the CSS but it didn't look that trivial to solve, so I'm hoping one of you experts can do it... :)

(I am actually using the userscript release here.)

gist-wide.css doesn't work anymore

First of all: thanks a lot for this style, it is a nerve-saver!

I have noticed however, that it currently scrambles my homepage (see the attached screenshot below).

I was able to fix the problem by just commenting out the .news and .dashboard-sidebar classes from github.css. I can make a pull request if you'd like, but first I wanted to ask:

• do you foresee any problem in any other page than the homepage? I haven't found any yet
• should the pull request be against master or the v2 branch?

After the latest commit 17c1ba0 the Conversation tab full width got broken, instead of showing full width it shows a narrow conversation and aligns it to the left.

Hello,

I found this repo today, and it gives me quite a good wide view on github. 👍👍👍

Since I use octotree plugin,
which show me code tree on steroids.
It has very small conflicts with github-wide.

As you see, navbar by octotree hide content of issue.
I want to move .repository-content depends on navbar width but I don't know about css very well 😢
May I get a advice for this issue?

thanks

Similar or same as #74. From one day to the next, my Github isn't doing what it did with your style active.

No more Github wide. Github now acts and looks as if the style isn't active anymore

NOTE: I tried both the version in this repo and the fork by cfoellmann

The CSS file github-wide.css makes my list of issues automatically resize to the width of the browser, but not the text fields in each issue. That's a problem for me, because our issues tend to have source-code in them that is too wide for the window. I was hoping that this would allow the windows to expand horizontally when I made the browser window wider.

Don't get me wrong --- this is a great CSS package --- but it would be more useful for me if it made more of the layouts responsive.

The notifications, create and profile icons in the navigation bar don't move inwards when windows is smaller,

It seems that github has changed again its CSS so the code is not properly streched out. Just only the top part is affected.

Regards, Arturo

You said in the Readme that you work at GitHub...
I know it's non-zero work to "ship" this as the default, but it seem worth it. Please do this. All users would benefit.

As an alternative to userstyles.org, have you considered just hosting the style here on GitHub?

Thank you.

Every time there is an update update to the style, I need to manually enter in any of the enterprise github urls I use.
I came up with the following regex that appears to work for both public & GHE and wanted to see if anyone else felt it would be of value.
Instead of matching just for the github.com domain, you can match against the regex expression https?://github\..*
this would match the standard github.com but also the github.enterprise-domain-here.com domains.

Compare jenkinsci/workflow-job-plugin#104 (comment) to https://github.com/jenkinsci/workflow-job-plugin/pull/104/files#r213702802: the former is full-width, the latter is not.

Hi @mdo , here is a screenshot of the issue:

You can reproduce this issue by navigating to the github.com and scrolling down to the footer.

While viewing a long Gist, the horizontal scrollbar is way down at the bottom of the content.

This is mostly only a problem in cases where content is wider than viewport. Scrolling to the right to see the un-wrapped content is easier with the scrollbar. I find myself sometimes scrolling to the bottom of the page just so I can scroll right, and then all the way back up to see the content that didn't wrap.

Maybe this is not something you can change with a theme, and thats ok if that is true.

I tried installing this for our GitHub enterprise and it doesn't seem to affect the width. Any ideas?

When I edit an issue with this user style enabled, extra whitespace appears below the form controls. I'm using the latest Chrome. Here's what it looks like:

Please see attached image. I am using Stylish.

I made this so many years ago—GitHub's UI has changed drastically. Our nav, header, and more is completely new in contrast. Any thoughts on me carving out a fresh release here, and then changing this repo entirely for a sleeker, full-width-ish CSS variables powered stylesheet?

Hello, and thank you for this wonderful tool! It's great for diff views, but I'd like to limit it to be active only in the diff view, and not on other pages on github. Is there an easy way?