Fix swarming Task Page layout

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

Index: appengine/swarming/ui/res/imp/taskpage/task-page.html
diff --git a/appengine/swarming/ui/res/imp/taskpage/task-page.html b/appengine/swarming/ui/res/imp/taskpage/task-page.html
index 25a8709a3a6d02dab9b4701b718b6d88ddd810aa..af0adf94a069a9c1f6a617397980f84ccf686d48 100644
--- a/appengine/swarming/ui/res/imp/taskpage/task-page.html
+++ b/appengine/swarming/ui/res/imp/taskpage/task-page.html
@@ -53,14 +53,14 @@
         height: 2000px;
       }
 
-      .left {
-        min-width: 550px;
-      }
       .right {
-        min-width: 500px;
         margin-top: 8px;
       }
 
+      .break-all {
+        word-break: break-all;
+      }
+
       .expand {
         min-width: 3em;
         vertical-align: middle;
@@ -88,6 +88,11 @@
         border: 3px solid #1F78B4;
         margin-left: 5px;
         min-height: 80vh;
+        min-width: 550px;
+      }
+
+      .task-info {
+        min-width: 500px;
       }
     </style>
 
@@ -159,7 +164,7 @@
               </task-disambiguation>
             </template>
 
-            <table hidden$="[[_not(_task_exists)]]">
+            <table class="task-info" hidden$="[[_not(_task_exists)]]">
               <tr>
                 <td>Name</td>
                 <td>[[_request.name]]</td>
@@ -305,11 +310,11 @@
               <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>
@@ -320,7 +325,7 @@
                 </tr>
                 <template is="dom-repeat" items="{{_request.tags}}" as="tag">
                   <tr>
-                    <td>[[tag]]</td>
+                    <td class="break-all">[[tag]]</td>
                   </tr>
                 </template>
 
@@ -347,7 +352,7 @@
                 </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>
@@ -364,10 +369,14 @@
                     <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>
 
@@ -508,7 +517,7 @@
               <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>