Merge ~ines-almeida/launchpad:update-wrapping-from-comment-boxes into launchpad:master

[Ines Almeida]

Updated <p> width restriction and increased 'page-width' parameter

Updated `lib/canonical/launchpad/icing/css/typography.scss` to remove max-width restriction for <p> text. Kept it for other components that had the same restriction.

Also updated the `page-width` scss parameter from 45em to 60em simply because it looks better imo. That parameter is only used in a few places.

[Ines Almeida (ines-almeida)]

Whoever reviews, let me know if there are particular pages you think I should check/worry about.

[Ines Almeida (ines-almeida)]

A few relevant links I forgot to add to the MP:
https://bugs.launchpad.net/launchpad/+bug/1871106

https://warthogs.atlassian.net/browse/LP-1079

[Colin Watson (cjwatson)]

This is quite a big change to our rendering practice (despite the small diff). I personally prefer it, but let's see how it looks on qastaging and how it's received in terms of that "Wrap the text before the eye gets lost" comment. If it's too jarring, we might need to switch back to a finite but larger `max-width` instead.

review: Approve

[Ines Almeida (ines-almeida)]

> This is quite a big change to our rendering practice (despite the small diff).
> I personally prefer it, but let's see how it looks on qastaging and how it's
> received in terms of that "Wrap the text before the eye gets lost" comment.
> If it's too jarring, we might need to switch back to a finite but larger `max-
> width` instead.

I don't mind going for a more conservative approach and just wrapping later (perhaps using $wider-page as the value for the <p> wrap (which makes the comments wrap 66% later - 70em - which I think also looks pretty good).

I am writing this comment in the 'reply to comment' page and looking at your long-ish comment, and the more I think about it, the more I think it might be easily be jarring in pages where the text goes across the whole width of the page (such as the 'reply to comment' one).

I think by the end of this comment, I have convinced myself to change the approach ;)

[Colin Watson (cjwatson)]

I'm happy with this too.

review: Approve

diff --git a/lib/canonical/launchpad/icing/css/typography.scss b/lib/canonical/launchpad/icing/css/typography.scss
index 1e58f29..a2455d2 100644
--- a/lib/canonical/launchpad/icing/css/typography.scss
+++ b/lib/canonical/launchpad/icing/css/typography.scss
@@ -1,6 +1,6 @@
 // This file the result of auto-converting typography.css to scss.
 
-$page-width: 45em;
+$page-width: 60em;
 $wider-page: $page-width + 15em;
 $reduced-spacing: 0.8em;
 $link-colour: #03a;
@@ -39,13 +39,15 @@ h1, h2, h3, h4, h5, h6 {
   p {
     width: auto;
     margin-bottom: $reduced-spacing;
+    /* Wrap the text before the eye gets lost. */
+    max-width: $wider-page;
   }
 
   div + p, ul + p, table + p {
     margin-top: $reduced-spacing;
   }
 
-  p, li, dt, dd, blockquote, .narrow, .narrow-listing {
+  li, dt, dd, blockquote, .narrow, .narrow-listing {
     /* Wrap the text before the eye gets lost. */
     max-width: $page-width;
   }