Making WordPress.org

Opened 13 months ago

Last modified 6 months ago

#4917 new defect

Trac needs more responsive styles

Reported by: sumitsingh Owned by:
Milestone: Priority: high
Component: Trac Keywords: needs-patch needs-design-feedback



I have found desing the issue on Moto E4 plus in chrome browser in below mentioned link.



Attachments (2)

Screenshot_20191217-232159.png (164.5 KB) - added by sumitsingh 13 months ago.
Bug screenshot
Screenshot_20191218-091019.png (142.1 KB) - added by sumitsingh 13 months ago.
Bug screenshot 2

Download all attachments as: .zip

Change History (7)

13 months ago

Bug screenshot

13 months ago

Bug screenshot 2

#1 @dd32
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 @dd32
13 months ago

  • Summary changed from Desing issue in Mobile device to Trac needs more responsive styles

#3 @dd32
12 months ago

#4967 was marked as a duplicate.

#4 @MarcosAlexandre
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:



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;
Last edited 6 months ago by MarcosAlexandre (previous) (diff)

This ticket was mentioned in Slack in #meta by marcosalexandre. View the logs.

6 months ago

Note: See TracTickets for help on using tickets.