37signals Basecamp Flexible Width

Added by beporter@userstyles, Created: Sep 26, 2013, Updated: May 03, 2014
  • With the style applied
  • With the style applied (Generated screenshot)
  • Without the style applied (Generated screenshot)

Description:

The new Basecamp is great, but it wastes an awful lot of screen real estate. This style removes the fixed widths from the "sheets" in Basecamp Next. There are some trade-offs made in rendering-- see the Issues list below. We can only do so much with only CSS.

More info
Change Log:
* 2014-05-03: Started adding min-widths to prevent weird wraps in narrow windows.
* 2014-04-07: When viewing a todo list by itself, the list title (and optional comment for the entire list) no longer floats underneath the list commands (Edit, Delete..., Copy..., Move...).
* 2014-01-20: Worked on document editing iframe to fill width, but can't get inside the to modify its own CSS.
* 2013-11-11: Disabled the "printer feed holes" background image from the Basecamp announcements blog so it doesn't repeat at wider widths.
* 2013-10-29: Disabled the blue lines in text documents to work around the repeating vertical stripe.
* 2013-10-24: Fixed the right margin on posts you can edit so the Edit/Delete link floater doesn't cover the text of the first post.
* 2013-10-04: Added CSS to make the footer "who to contact" stuff when posting flexible.
* 2013-09-30: Added some new CSS to make Todo lists behave a little better. Project footer stuff now expands.

Issues:
* Project cards in the main Projects list will not grow to fill the width-- they are hard-coded to 3-per-row.
* Text document "previews" in a Project's main view will grow and shrink in width a bit before snapping to new rows.
* When viewing Todo Lists, it's possible for the righthand "sidebar" to overflow past the bottom of the white "page" background, if it is longer than the list itself.
* When editing Text Documents, the editable width does not grow and the horizontal "line rules" do not disappear, since we can't modify the CSS inside the <iframe>.

Installs:
Applies to:
basecamp.com

Related styles:

WARNING: This webware is not functioning properly. Please enable javascript in your browser and try again.