On large or widescreen monitors admin forms can be stretched very wide, leading to an awkward interface. This is particularly true of node edit forms where text areas become very large and stretched. Perhaps max-width could be applied? The only place where I'd see this potentially being a problem is on pages like permissions or administrative tabels that actually benefit from having as much horizontal screen space as possible.

Comments

tkoleary’s picture

Totally agree. I will apply a max width.

ryanwebpage’s picture

The max width of 800 that has been applied seems to narrow for certain admin pages such as features, field management, context, views etc... I think it should be wider but will also need take into consideration that there could be a sidebar nav.

tkoleary’s picture

Status: Active » Postponed

Postponing because this affects/is affected by changes to responsive settings in progress in the 2.x branch

saltednut’s picture

I would advise against doing this on a global level since some settings forms are quite wide and only get 'better' with more width. (re: the permissions page)

I do agree it will help the node/edit screens.

tkoleary’s picture

@brantwynn

Good point. I think the answer is to limit the width of p, text field, text area and a few other form elements and tags so that line length does not exceed the number of characters that starts to hinder legibility. See: http://baymard.com/blog/line-length-readability

That way tables can be as wide as they need to be.

tkoleary’s picture

Status: Postponed » Needs review

@brantwynn

I just committed this:

p, 
blockquote,
pre,
h1,
h2,
h3,
h4,
h5,
h6,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
max-width: $line-length-normal;
}

And in dimensions.scss in library

$line-length-normal: 85ex;  
/* 
   Optimal text line length for legibility is 65-75 characters. 
   I add an extra 10 to compensate for the fact that ex 
   (the height of the lower case "x", usually equal to it's width 
   and therefor an average character) is narrower than the width of 
   an uppercase letter and any given line will contain a few of them.
   Apply in the style.scss file using "max-width" 
*/
saltednut’s picture

Status: Needs review » Fixed

@tkoleary since you already made the commit, this can be considered fixed.

If we have CSS that needs testing, a patch should be posted and the 'needs review' status can be used.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.