gitweb: fix broken mobile layouts across views #2043
Conversation
Welcome to GitGitGadgetHi @ritorhymes, and welcome to GitGitGadget, the GitHub App to send patch series to the Git mailing list from GitHub Pull Requests. Please make sure that either:
You can CC potential reviewers by adding a footer to the PR description with the following syntax: NOTE: DO NOT copy/paste your CC list from a previous GGG PR's description, Also, it is a good idea to review the commit messages one last time, as the Git project expects them in a quite specific form:
It is in general a good idea to await the automated test ("Checks") in this Pull Request before contributing the patches, e.g. to avoid trivial issues such as unportable code. Contributing the patchesBefore you can contribute the patches, your GitHub username needs to be added to the list of permitted users. Any already-permitted user can do that, by adding a comment to your PR of the form Both the person who commented An alternative is the channel Once on the list of permitted usernames, you can contribute the patches to the Git mailing list by adding a PR comment If you want to see what email(s) would be sent for a After you submit, GitGitGadget will respond with another comment that contains the link to the cover letter mail in the Git mailing list archive. Please make sure to monitor the discussion in that thread and to address comments and suggestions (while the comments and suggestions will be mirrored into the PR by GitGitGadget, you will still want to reply via mail). If you do not want to subscribe to the Git mailing list just to be able to respond to a mail, you can download the mbox from the Git mailing list archive (click the curl -g --user "<EMailAddress>:<Password>" \
--url "imaps://imap.gmail.com/INBOX" -T /path/to/raw.txtTo iterate on your change, i.e. send a revised patch or patch series, you will first want to (force-)push to the same branch. You probably also want to modify your Pull Request description (or title). It is a good idea to summarize the revision by adding something like this to the cover letter (read: by editing the first comment on the PR, i.e. the PR description): To send a new iteration, just add another PR comment with the contents: Need help?New contributors who want advice are encouraged to join git-mentoring@googlegroups.com, where volunteers who regularly contribute to Git are willing to answer newbie questions, give advice, or otherwise provide mentoring to interested contributors. You must join in order to post or view messages, but anyone can join. You may also be able to find help in real time in the developer IRC channel, |
|
There is an issue in commit b79cadb:
|
|
There is an issue in commit 678c5fe:
|
ritorhymes
force-pushed
the
gitweb-mobile-responsive
branch
from
678c5fe to
82f3cc5
Compare
Without a viewport meta tag, phone browsers render gitweb at desktop width and scale the whole page down to fit the screen. Add a viewport meta tag so the layout viewport tracks device width. This is the baseline needed for mobile CSS fixes in follow-up commits. Signed-off-by: Rito Rhymes <rito@ritovision.com>
On narrow screens, the project search input can exceed the available width and force page-wide horizontal scrolling. Add side padding to the search container and cap the input to its container width with border-box sizing, so the form stays within the viewport. Signed-off-by: Rito Rhymes <rito@ritovision.com>
On mobile-sized viewports, gitweb pages in log/commit/blob/diff views can overflow horizontally due to desktop-oriented paddings and fixed-width preformatted content. Add a shared mobile media query to rebalance those layouts: reduce or clear paddings in log/commit sections, keep header/search content within the viewport, and allow horizontal scrolling for preformatted blob/diff content instead of forcing page-wide overflow. Signed-off-by: Rito Rhymes <rito@ritovision.com>
On narrow screens, footer text can wrap, but the fixed 22px footer height and floated footer blocks can cause overflow. Switch to min-height and add a clearfix on the footer container so it grows to contain wrapped float content cleanly. Signed-off-by: Rito Rhymes <rito@ritovision.com>
On mobile, long project names in the page header can wrap to multiple lines, but the fixed 25px header height does not grow with wrapped content. Switch the header from fixed height to min-height so it expands as needed while keeping the same baseline height for single-line titles. Signed-off-by: Rito Rhymes <rito@ritovision.com>
ritorhymes
force-pushed
the
gitweb-mobile-responsive
branch
from
82f3cc5 to
8d5f2ed
Compare
|
/allow |
|
User ritorhymes is now allowed to use GitGitGadget. WARNING: ritorhymes has no public email address set on GitHub; GitGitGadget needs an email address to Cc: you on your contribution, so that you receive any feedback on the Git mailing list. Go to https://github.com/settings/profile to make your preferred email public to let GitGitGadget know which email address to use. |
|
/submit |
|
Submitted as pull.2043.git.1770679038.gitgitgadget@gmail.com To fetch this version into To fetch this version to local tag |
2 participants
Summary
This patch series fixes mobile responsiveness bugs that currently break page layouts in gitweb. The approach is adaptive rather than transformative: preserve legacy desktop layout, add targeted mobile constraints at ≤768, and prevent content from escaping its containers and breaking the layout.
Rationale
Software development has traditionally been desktop-first and remains the primary environment, but common contributor tasks like browsing history, reading logs, reviewing diffs, and sharing links are increasingly done on mobile devices while away from the workstation. This patch series aims to support the emerging need by improving day-to-day usability for contributors accessing gitweb on small screens.
Before and After Screenshots
Projects
Before
After
Log
Before
After
Note: certain inputs contain non-breaking/escaped spaces (e.g., NBSP), so the renderer treats the surrounding text as a single long continous string. Under constrained widths this can present as “mid-word” wrapping, but it is the correct handling of long strings; addressing that is a content-normalization concern, not a layout concern.
Commitdiff
Before
After (Pre-scroll)
After (Post-scroll)
Scrolling the tables to reveal the contents to the right
Commit & Footer
Before
Also notice the footer text wrapping down outside the footer background along with the two buttons
After (Pre-scroll)
After (Post-scroll)
Scrolling the table to reveal the contents to the right
Tree
Before
After (Pre-scroll)
After (Post-scroll)
Scrolling the table to reveal the contents to the right