Trac needs more responsive styles

[sumitsingh]

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

[sumitsingh]

Bug screenshot

[sumitsingh]

Bug screenshot 2

[dd32]

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.

[dd32]

#4967 was marked as a duplicate.

[MarcosAlexandre]

@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;
	}
}