Opened 13 months ago
Last modified 6 months ago
#4917 new defect
Trac needs more responsive styles
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Priority: | high | |
Component: | Trac | Keywords: | needs-patch needs-design-feedback |
Cc: |
Description
Hi,
I have found desing the issue on Moto E4 plus in chrome browser in below mentioned link.
https://core.trac.wordpress.org/ticket/48997
Thanks
Attachments (2)
Change History (7)
#1
@
13 months ago
- Keywords needs-patch added
- Priority changed from normal to lowest
Unfortunately Trac isn't designed for mobile usage and these are only two minor examples of where the styling breaks down.
Attachment Screenshot_20191217-232159.png
I can't duplicate that on any mobile devices I have, but I can reproduce it on Chrome at screen resolutions <450px, unfortunately I can't find the CSS that's doing it.
Removing all instances of min-width:
fixes it, but makes trac less usable on larger tablet resolutions. In this case, it's the presence of min-width
that's breaking it, I can't explain why and I can't find any combination of styles that are colluding to make it happen.
Attachment Screenshot_20191218-091019.png
Reports in general aren't usable on mobile anyway.
The standard experience for reports is the header/intro being ~33% of the viewport due to the extra-wide ticket table below it.
IMHO this ticket is a wontfix
unless anyone feels strong enough to redo quite a lot of CSS to make Trac usable on all mobile resolutions. The current experience of having to zoom on most pages is reasonably usable given the content being worked with. I'm marking this as needing a patch, and low priority due to the above.
#2
@
13 months ago
- Summary changed from Desing issue in Mobile device to Trac needs more responsive styles
#4
@
6 months ago
- Keywords needs-design-feedback added
- Priority changed from lowest to high
@dd32 I worked on a simple fix and got the result below:
Before:
https://prnt.sc/tg3dmc
After:
https://prnt.sc/tg3dde
I think this ticket should not be low priority, as it is related to accessibility. What do you think?
How can I send a patch with the fix?
In case someone wants to make the patch, the basic CSS I used is this:
@media (max-width:550px) { #ticket .ticket-star { font-size: 25px; width: 25px; } #ticket > h2 .trac-id { font-size: 100%; } #ticket table.properties > tbody > tr { border-bottom: none; } #ticket table.properties > tbody > tr > td { border-top: 1px dotted #eed; width: 42%; float: left; } #ticket table.properties > tbody > tr > th { border-top: 1px dotted #eed; width: 42%; float: left; } #ticket table.properties > tbody > tr > th#h_focuses { border-bottom: 1px dotted #eed; } }
Bug screenshot