HTML layout works poorly with narrow browser windows

[Jon Proulx]

When viewed in less than full screen size the pages are dominated by the left bar (contents or search) and the main content is truncated laterally making it very difficult to read.

Main content should wrap so horizontal scrolling is not required.

It would be nice if the left bar were collapsable to maximize content area.

screen shot http://people.csail.mit.edu/jon/openstack-doc-format-issue.png (note URL is local because I noticed this when comparing new edits side by side, but the issue is with the live site as well)

I'm using Firefox 30.0 on Ubuntu 14.04, browser width in screen shot is 921px

[Jon Proulx (jproulx)]

I see you can hide the side bar...

[Jon Proulx (jproulx)]

...but even with side bar hidden body text still wraps if window is under 900px or so

[Jon Proulx (jproulx)]

um not wraps, scrolls...sigh coffee underflow error

[Tom Fifield (fifieldt)]

See also related bug: https://bugs.launchpad.net/openstack-manuals/+bug/1167677

[Jon Proulx (jproulx)]

to proxy the recent coments of a coworker who's been complaining of this for soem time (but not opening a bug):

02:35:46 PM) Me: there is a "sidebar" link at top right of openstack doc pages which toggles the offending side bar (would be nice if it were nearer the side bar)
(02:41:39 PM) Me: still doesn't fully fix the problem, if you go under about 900px wide even without the sidebar reading requires horizontal scrolling.

(03:00:19 PM) Coworker: javascript, of course
(03:00:45 PM) Coworker: the problem is how the horizontal scroll bar is hooked up to the content, I think...
(03:03:00 PM) Coworker: if I scroll to the right, the sidebar should slide off to the left
(03:03:21 PM) Coworker: fwiw, my browser window is 877x797

[Tom Fifield (fifieldt)]

Triage note: CSS for this thing lives somewhere under https://github.com/stackforge/clouddocs-maven-plugin

[abhiram moturi (abhiram-moturi)]

The exact cause is in this file
https://github.com/stackforge/clouddocs-maven-plugin/blob/a3621dfb4b620f3993d826649f7b944dae4b2407/src/main/resources/common/css/positioning-openstack.css

Currently min-width for #content is 800px and hence the bug occurs for small widths. We can change that to 0 or inherit to make it work correctly

[abhiram moturi (abhiram-moturi)]

Review : https://review.openstack.org/#/c/116715/