Content wider than page (Google search reported issues)

[halkeye]

[Chandu-4444]

Hey, Can I work on this issue? I'm a beginner and a few guidelines would help me a lot!

[MarkEWaite]

Thanks for your interest @Chandu-4444 . Yes, you can help. In the case of those two pages, the likely cause of the content being wider than the page is probably that the markdown or asciidoc documentation for the specific plugin is using some content that is wider than necessary.

https://github.com/jenkinsci/perfecto-plugin#readme shows a horizontal scroll bar for one of its examples and one or more of the images render very poorly on plugins.jenkins.io. A pull request to https://github.com/jenkinsci/perfecto-plugin/blob/master/README.md seems like the most likely way to resolve the "page too wide" warning on that plugin.

The same seems to be the case for https://github.com/jenkinsci/pipeline-maven-plugin#readme . It includes examples that need line breaks inserted so that they do not require horizontal scrolling to read the full text of the example.

It appears that @zbynek has already submitted the pull request for pipeline-maven plugin. See jenkinsci/pipeline-maven-plugin#348 . You could do the same type of thing for the perfecto plugin

[zbynek]

@Chandu-4444 you can open the page on your phone or in Chrome dev tools in the mobile view -- you will see that the whole page https://github.com/jenkinsci/pipeline-maven-plugin#readme is scrollable horizontally, which is bad for navigation. My PR will improve it but maybe not fix it. The problem is with table formatting: I guess we need max-width and overflow-y:auto for tables. You can compare the README rendering on github and plugins.jenkins.io to get some more precise ideas. Also if we're touching formatting of tables, we should probably add some border to the cells and avoid the aggressive word-wrapping that you can see here: https://plugins.jenkins.io/csp/. A PR for https://github.com/jenkins-infra/plugin-site/blob/master/src/styles/base.css would be appreciated. I think the easiest way to verify your fix is to check the Lighthouse report in Chrome dev tools for mobile app, in particular the progressive web app section. For maven pipeline I can see this:

For the perfecto plugin I'm not sure what's the problem, I don't get horizontal scrolling for the whole page and I don't think horizontal scrolling for indivisual elements (like the code sample) is a problem, the lighthouse check is also passing. May be a false positive from Google? Anyway @MarkEWaite is right that the images on that page look bad, the easy solution is to avoid specifying the dimensions and let GitHub / plugin page figure it out based on the resolution, so a PR for perfecto readme is needed.

[Chandu-4444]

Thanks for the information @zbynek and @MarkEWaite. I'll modify those images at perfecto readme.

[aheritier]

@zbynek PR merged. Thx a lot

[zbynek]

@halkeye there were 2 PRs merged, so I'm closing this. If you still see these issues in Webmaster console, maybe they can be gathered in #844 (?)

[halkeye]

google says we are good right now. I'll update 844 if there's new alerts