Trac: Improve mobile styling on report pages

[mitraval192]

I found the "​https://meta.trac.wordpress.org" site is not looking properly on the mobile device.

[mitraval192]

Displaying white space on the right side of the page.

[mitraval192]

Regarding this issue, we need to add one div on above the "<table class="listing tickets">".

and add below CSS.

div.CLASS_NAME { 
   width: auto;
   overflow: scroll;
}

[SergeyBiryukov]

Related: #2764

[birgire]

Example of a responsive trac table

[birgire]

In responsive-table.jpg​ we have an example of a responsive trac table, where each column has full width:

table.listing th, table.listing td {
    display: block;
}

where we would wrap this in a css mobile media query.

This would also need extra labels, only visible on mobile, for the column names in each row.

[SergeyBiryukov]

Related: #4554

[vladytimy]

Based on this proposal made by @birgire there is a similar proposal here (3rd item):

https://meta.trac.wordpress.org/ticket/4917#comment:17

This is a 4 part patch that tries to bring better responsiveness for Trac reports. Your feedback and testing would be much appreciated. Thank you!

[dd32]

This might be improved with [11610], but regardless, I'm going to close this as a duplicate of #4917