[Fedora Infrastructure] #1774: Fedora Wiki's stylesheet is screwey on small screen high DPI devices

[Fedora Infrastructure]

#1774: Fedora Wiki's stylesheet is screwey on small screen high DPI devices
---------------------+------------------------------------------------------
 Reporter:  ynemoy   |       Owner:  webmaster
     Type:  bug      |      Status:  new      
 Priority:  major    |   Milestone:           
Component:  General  |     Version:           
 Severity:  Normal   |    Keywords:           
---------------------+------------------------------------------------------
 = phenomenon =

 Multiple issues here: Tables go beyond the page but the page isn't told
 about being wider than the screen, so horizontal scrolling is not
 possible. Embedded pictures and headers aren't formatted properly so text
 can flow around it, even in extreme situations. The sidebar takes up too
 much space at high DPIs leaving only half the page for the body.

 In the above order:
 http://ynemoy.fedorapeople.org/wikixofail/IMAG0016.jpg
 http://ynemoy.fedorapeople.org/wikixofail/IMAG0018.jpg

 http://ynemoy.fedorapeople.org/wikixofail/IMAG0013.jpg

 http://ynemoy.fedorapeople.org/wikixofail/IMAG0014.jpg
 http://ynemoy.fedorapeople.org/wikixofail/IMAG0015.jpg

 Resizing the text and page zoom fixes some problems, but my opinion is
 that this is non obvious to many people.

 http://ynemoy.fedorapeople.org/wikixofail/IMAG0017.jpg

 = reason =

 I'm not much of a CSS guy, but i have a few ideas. First of all, the
 sidebar is strictly set to a hard size in relation to the rest of the
 page. Second of all, horizontal scrolling is (and rightly so) disabled at
 all costs. Third of all, something is not set properly when formatting
 embedded inline pictures, so that the sidebar can wrap around it, or so
 that it's left justified instead of right justified so it runs off the
 page rather than running into the sidebar.

 = recommendation =

 Wikipedia has a pretty decent mobile interface that works very nicely on
 the Android devices, and presumably on others as well. It avoids using a
 sidebar and TOC by replacing it with expandable fields. I think that at
 least having that stylesheet available would be a start. The tricky part
 is detecting the actual dimensions *and* DPI of a screen and switching to
 the appropriate stylesheet. In this particular example, the screenshots
 were taken on an XO using mostly stock settings and Firefox.

 Another and more costly and time consuming solution is to redesign the
 page more comprehensively so that it is a general purpose page for both
 mobile, small screen, and normal devices.

-- 
Ticket URL: <https://fedorahosted.org/fedora-infrastructure/ticket/1774>
Fedora Infrastructure <http://fedoraproject.org/wiki/Infrastructure>
Fedora Infrastructure Project for Bugs, feature requests and access to our source code.