This patch series fixes mobile responsiveness bugs that currently break
page layouts in cgit. The approach is adaptive rather than transformative:
it preserves the legacy desktop layout, adds targeted mobile constraints
at <=768px, and prevents content from escaping its containers and
breaking layout.

Rationale

Software development remains largely desktop-first, but contributors
increasingly browse history, read logs, review diffs, and share links
from mobile devices while away from a workstation. This patch series
improves day-to-day usability for contributors accessing cgit on small
screens, while preserving existing desktop behavior.

Before and After Mobile Screenshots

For convenience, a sequenced view of the before and after screenshots
can be seen at https://github.com/ritovision/cgit/pull/1


Index
  Before:
    
https://github.com/user-attachments/assets/5a7c2936-d940-407d-a078-cebe845d1378

  After (top, pre-scroll):
    
https://github.com/user-attachments/assets/b7cd488b-625c-4263-9291-52a1de70d9dd

  After (top, post-scroll; content scrolled right):
    
https://github.com/user-attachments/assets/9956f880-1df1-4249-a496-f9812ea1f0d1

  After (bottom):
    
https://github.com/user-attachments/assets/d940671d-a0ca-4512-b595-3a537436acc2

Summary
  Before:
    
https://github.com/user-attachments/assets/87d1407d-2ad7-42dc-9f9a-d167e133f941

  After (pre-scroll):
    
https://github.com/user-attachments/assets/c652d2ba-c2b8-4d62-bcb7-714c2b6807e3

  After (post-scroll; tabs row and table content scrolled right):
    
https://github.com/user-attachments/assets/4339c0fc-c7f2-4aab-b676-32b5b0d15eb9

  After (long repo name wraps):
    
https://github.com/user-attachments/assets/1bc9dfbc-7f9b-45cf-bbe3-6fc2633dbaf7

Commit (representative of similar code element views)
  Before:
    
https://github.com/user-attachments/assets/aa8dd431-90ca-461a-afa5-00c398201c21

  After (pre-scroll):
    
https://github.com/user-attachments/assets/b8850299-b9f0-414f-9b48-4ab4b0a58792

  After (post-scroll):
    
https://github.com/user-attachments/assets/1c1a501f-fdbf-411b-891d-643af609e51a


Rito Rhymes (5):
  ui-shared: add viewport tag for baseline mobile usability
  css: contain horizontal page overflow to content blocks
  css: make tabs row horizontally scrollable on mobile
  css: reflow header table to prevent mobile overflow
  css: wrap long unbroken repo names in mobile header

 cgit.css    | 109 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 ui-shared.c |   1 +
 2 files changed, 110 insertions(+)

-- 
2.51.0

Reply via email to