launchpad-reviewers team mailing list archive

[Adrien Nader <mp+477831@xxxxxxxxxxxxxxxxxx>]

Adrien Nader has proposed merging ~adrien/launchpad:larger-textareas into launchpad:master.

Requested reviews:
  Launchpad code reviewers (launchpad-reviewers)

For more details, see:
https://code.launchpad.net/~adrien/launchpad/+git/launchpad/+merge/477831

This merge makes the width of the textareas on LP 74em wide so that the text inside them has 72em of space.

The new width matches the width used to display the text afterwards. I am not sure why the test is displayed on 72em rather than 80em or wider but this can be the topic of another merge request. I think that 72em here will be uncontroversial but still give a nice UX boost.

PS: TBH, I'm also tempted to use the remaining horizontal space to duplicate the text inputs/outputs with rendered markdown; this wouldn't be the prettiest but it would be client-side and probably much much easier to implement than server-side rendering (plus it could be live-updated for text inputs). But I *definitely* digress here. :) 
-- 
Your team Launchpad code reviewers is requested to review the proposed merge of ~adrien/launchpad:larger-textareas into launchpad:master.

diff --git a/lib/lp/bugs/templates/bugtask-index.pt b/lib/lp/bugs/templates/bugtask-index.pt
index ac2d1ba..0c28b7d 100644
--- a/lib/lp/bugs/templates/bugtask-index.pt
+++ b/lib/lp/bugs/templates/bugtask-index.pt
@@ -32,9 +32,12 @@
          });
       </script>
       <style type="text/css">
-        /* Align the 'add comment' link to the right of the comment box. */
-        #add-comment-form textarea { width: 100%; }
-        #add-comment-form { max-width: 60em; padding-bottom: 4em; }
+        /* - Align the 'add comment' link to the right of the comment box.
+           - Use the same size for the textare inner width and where the text
+             will be displayed afterwards; more details in
+           branchmergeproposal-index.pt which uses the same style. */
+        #add-comment-form textarea { width: 100%; overflow-y: scroll; }
+        #add-comment-form { max-width: 74em; padding-bottom: 4em; }
         #add-comment-form .actions {float: right;}
         .buglink-summary dd { font-size: 10px; }
         a#privacy-link:link:hover, a#privacy-link:visited:hover {text-decoration:none;}
diff --git a/lib/lp/code/templates/branchmergeproposal-index.pt b/lib/lp/code/templates/branchmergeproposal-index.pt
index 1d2f642..ad4834a 100644
--- a/lib/lp/code/templates/branchmergeproposal-index.pt
+++ b/lib/lp/code/templates/branchmergeproposal-index.pt
@@ -19,12 +19,21 @@
       margin: 1em 0;
     }
     #add-comment-form {
-      max-width: 60em;
+      /* Give 72em to the inner textarea which scrollbar is always visible.
+         This is the width used to display the text afterwards.
+         The value 74em has been found empirically in my browser. Something
+         else might be more appropriate in a different browser but in any case,
+         it will be closer and better than 60em. */
+      max-width: 74em;
       padding-bottom: 3em;
     }
     #add-comment-form textarea{
       width: 100%;
       max-width: inherit;
+      /* Always display the vertical scrollbar. Otherwise, when content is
+         added, scrollbars become visible and reduce the width available for
+         text inside the textarea, making reliable sizing impossible. */
+      overflow-y: scroll;
     }
     #add-comment-form .actions {
       float: right;