Fix swarming Task Page layout

appengine/swarming/ui/res/imp/taskpage/task-page.html

 <!--
   Copyright 2016 The LUCI Authors. All rights reserved.
   Use of this source code is governed under the Apache License, Version 2.0
   that can be found in the LICENSE file.
 
   This in an HTML Import-able file that contains the definition
   of the following elements:
 
     <task-page>
 
@@ skipping 35 matching lines @@
   <template>
     <style include="iron-flex iron-flex-alignment swarming-app-style single-page-style task-style">
       .milo {
         width: calc(100% - 11px);
         /** We don't control the milo site and it's on a different domain than
         us, so there's no good way to avoid scrolling other than tell the iframe
         it is really tall.*/
         height: 2000px;
       }
 
-      .left {
-        min-width: 550px;
+      .right {
+        margin-top: 8px;
       }
-      .right {
-        min-width: 500px;
-        margin-top: 8px;
+
+      .break-all {
+        word-break: break-all;
       }
 
       .expand {
         min-width: 3em;
         vertical-align: middle;
         padding: .5em;
       }
 
       .code {
         font-family: monospace;
       }
 
       .stdout {
         white-space: pre-line;
         padding: 2px;
       }
 
       .refresh_input {
         padding: 0 5px;
       }
 
       .reproduce {
         margin-left: 5px;
       }
 
       .tabbed {
         border: 3px solid #1F78B4;
         margin-left: 5px;
         min-height: 80vh;
+        min-width: 550px;
+      }
+
+      .task-info {
+        min-width: 500px;
       }
     </style>
 
     <url-param name="id"
       value="{{task_id}}">
     </url-param>
     <url-param name="try_detail"
       value="{{_try_detail}}">
     </url-param>
     <url-param name="request_detail"
@@ skipping 51 matching lines @@
             <template is="dom-if" if="[[_disambiguate(task_id,_result)]]">
               <h2>Displaying a summary for a task with multiple tries</h2>
               <task-disambiguation
                 busy="{{busy2}}"
                 auth_headers="[[_auth_headers]]"
                 task_id="[[task_id]]"
                 summary_result="[[_result]]">
               </task-disambiguation>
             </template>
 
-            <table hidden$="[[_not(_task_exists)]]">
+            <table class="task-info" hidden$="[[_not(_task_exists)]]">
               <tr>
                 <td>Name</td>
                 <td>[[_request.name]]</td>
               </tr>
               <tr>
                 <td>State</td>
                 <td class$="[[_stateClass(_result)]]">[[state(_result)]]</td>
               </tr>
               <tr>
                 <td>Created</td>
@@ skipping 125 matching lines @@
                   <td>
                     <button on-click="_toggleDetails">
                       <iron-icon icon="icons:remove-circle-outline"></iron-icon>
                     </button>
                   </td>
                 </tr>
               </template>
               <template is="dom-if" if="[[_request_detail]]">
                 <tr>
                   <td>Extra Args</td>
-                  <td class="code">[[_extraArgs(_request)]]</td>
+                  <td class="code break-all">[[_extraArgs(_request)]]</td>
                 </tr>
                 <tr>
                   <td>Command</td>
-                  <td class="code">[[_command(_request)]]</td>
+                  <td class="code break-all">[[_command(_request)]]</td>
                 </tr>
                 <tr>
                   <td>Idempotent</td>
                   <td>[[_request.properties.idempotent]]</td>
                 </tr>
                 <tr>
                   <td rowspan$="[[_rowspan(_request.tags)]]">Tags</td>
                 </tr>
                 <template is="dom-repeat" items="{{_request.tags}}" as="tag">
                   <tr>
-                    <td>[[tag]]</td>
+                    <td class="break-all">[[tag]]</td>
                   </tr>
                 </template>
 
                 <tr>
                   <td>Execution timeout</td>
                   <td>[[_humanDuration(_request.properties.execution_timeout_secs)]]</td>
                 </tr>
                 <tr>
                   <td>I/O timeout</td>
                   <td>[[_humanDuration(_request.properties.io_timeout_secs)]]</td>
                 </tr>
                 <tr>
                   <td>Grace period</td>
                   <td>[[_humanDuration(_request.properties.grace_period_secs)]]</td>
                 </tr>
 
                 <tr>
                   <td>CIPD server</td>
                   <td>
                     <a href$="[[_request.properties.cipd_input.server]]">
                       [[_request.properties.cipd_input.server]]
                     </a>
                   </td>
                 </tr>
                 <tr>
                   <td>CIPD version</td>
-                  <td>[[_request.properties.cipd_input.client_package.version]]</td>
+                  <td class="break-all">[[_request.properties.cipd_input.client_package.version]]</td>
                 </tr>
                 <template is="dom-if" if="[[_wasPickedUp(_result)]]">
                   <tr>
                     <td>CIPD package name</td>
                     <td>[[_result.cipd_pins.client_package.package_name]]</td>
                   </tr>
                 </template>
 
                 <tr hidden$="[[_not(_request.properties.cipd_input)]]">
                   <td rowspan$="[[_cipdRowspan(_request,_result)]]">CIPD packages</td>
                 </tr>
                 <template is="dom-repeat" items="[[_cipdPackages(_request,_result)]]" as="cipd">
                   <tr>
                     <td>[[cipd.path]]/</td>
                   </tr>
                   <tr>
-                    <td><b>Requested:</b>[[cipd.requested]]</td>
+                    <td class="break-all">
+                      <b style="user-select:none">&nbsp;&nbsp;&nbsp;&nbsp;Requested: </b>[[cipd.requested]]

[stephana, 2016/12/05 18:25:50]

It seem user select is experimental
https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

I think <b> is a deprecated tag and the using &nbsp; like this feels a bit
clunky. 
Could ould you use CSS instead. i.e. (details probably wrong)

.whateverClass {
     margin-left: 4em;
     font-weight: bold; 
} 

<span class="whateverClass">Request</span>  

[kjlubick, 2016/12/05 18:55:28]

I am aware user-select is experimental.  It seems to have good browser support,
despite this.  I've added in the browser-prefixed versions, just to be sure.

I've moved all of this into CSS, as you requested.

+                    </td>
                   </tr>
                   <tr hidden$="[[!_hasActualCIPDPackages(_result)]]">
-                    <td><b>Actual:</b>[[cipd.actual]]</td>
+                    <td class="break-all">
+                      <b style="user-select:none">&nbsp;&nbsp;&nbsp;&nbsp;Actual: </b>[[cipd.actual]]
+                    </td>
                   </tr>
                 </template>
 
                 <tr hidden$="[[_empty(_request.properties.caches)]]">
                   <td rowspan$="[[_rowspan(_request.properties.caches)]]">Named caches</td>
                 </tr>
                 <template is="dom-repeat" items="[[_request.properties.caches]]" as="cache">
                   <tr>
                     <td><span>[[cache.name]]</span>:<span>[[cache.path]]</span></td>
                   </tr>
@@ skipping 120 matching lines @@
               </paper-input>
             </div>
 
             <template is="dom-if" if="[[_supportsMilo(_request,_show_raw)]]">
               <div class="milo tabbed" hidden$="[[_isSummaryLink(task_id)]]">
                 Milo results are only generated for task summaires, that is, tasks whose ids end in 0.  Tasks ending in 1 or 2 represent possible retries of tasks.  See <a href="//goo.gl/LE4rwV">the docs</a> for more.
               </div>
               <iframe id="miloFrame" class="milo tabbed" src$="[[_getDisplayServerLink(_server_details.display_server_url_template,task_id)]]"></iframe>
             </template>
             <template is="dom-if" if="[[_show_raw]]">
-              <div class="code stdout tabbed">[[_rawOutput(_stdout,_result)]]</div>
+              <div class="code stdout tabbed break-all">[[_rawOutput(_stdout,_result)]]</div>
             </template>
           </div>
         </div>
       </div>
     </swarming-app>
 
     <paper-dialog id="prompt" modal on-iron-overlay-closed="_promptClosed">
       <h2>Are you sure?</h2>
       <div>Are you sure you want to [[_dialog_prompt]]?</div>
       <div class="buttons">
@@ skipping 311 matching lines @@
         return result && result.state !== this.PENDING && result.state !== this.CANCELED && result.state != this.EXPIRED;
       },
 
       _wasNotPickedUp: function(result) {
         return result && !this._wasPickedUp(result);
       },
     });
   })();
   </script>
 </dom-module>