Make script-insets obey their bounds, and other padding tweaks.

runtime/observatory/lib/src/elements/script_inset.html

 <link rel="import" href="../../../../packages/polymer/polymer.html">
 <link rel="import" href="observatory_element.html">
 
 <polymer-element name="script-inset" extends="observatory-element">
   <template>
     <style>
       .sourceInset {
       }
       .sourceTable {
-      display: table;
-      background-color: #f5f5f5;
-      border: 1px solid #ccc;
-      padding: 10px;
-      overflow-y: auto;
-      width: 100%;
-      box-sizing: border-box;
+        display: table;
+        background-color: #f5f5f5;
+        border: 1px solid #ccc;
+        padding: 10px;
+        width: 100%;
+        box-sizing: border-box;
       }
       .sourceRow {
-      display: table-row;
+        display: table-row;
       }
       .sourceItem, .sourceItemCurrent {
-      display: table-cell;
-      vertical-align: top;
-      font: 400 14px consolas, courier, monospace;
-      line-height: 125%;
-      white-space: pre;
+        display: table-cell;
+        vertical-align: top;
+        font: 400 14px consolas, courier, monospace;
+        line-height: 125%;
+        white-space: pre;
+        max-width: 0;

[rmacnak, 2015/05/06 01:33:44]

Apparently this needs to be set for a table-cell to respect overflow.

[turnidge, 2015/05/06 07:14:42]

Do we want hidden or auto?  Will auto give us a scrollbar when we need it?

[rmacnak, 2015/05/06 17:10:33]

A scroll bar would be nice if it applied to the script inset as a block. If I
put overflow-x:auto here, each line has its own scroll bar. If I put
overflow-x:auto on the table, the lines again overflow the script inset. :(

+        overflow-x: hidden;
       }
       .currentLine {
-      background-color: #fff;
+        background-color: #fff;
       }
       .currentCol {
-      background-color: #6cf;
+        background-color: #6cf;
       }
       .hitsNone, .hitsNotExecuted, .hitsExecuted {
-      display: table-cell;
-      vertical-align: top;
-      font: 400 14px consolas, courier, monospace;
-      min-width: 32px;
-      text-align: right;
-      color: #a8a8a8;
+        display: table-cell;
+        vertical-align: top;
+        font: 400 14px consolas, courier, monospace;
+        width: 4em;
+        text-align: right;
+        color: #a8a8a8;
       }
       .hitsNotExecuted {
-      background-color: #EEA7A7;
+        background-color: #EEA7A7;
       }
       .hitsExecuted {
-      background-color: #9BDD9B;
+        background-color: #9BDD9B;
       }
 
       .emptyBreakpoint, .possibleBreakpoint, .busyBreakpoint, .unresolvedBreakpoint, .resolvedBreakpoint  {
         display: table-cell;
         vertical-align: top;
         font: 400 14px consolas, courier, monospace;
-        min-width: 1em;
+        width: 1em;
         text-align: center;
         cursor: pointer;
       }
       .possibleBreakpoint {
         color: #e0e0e0;
       }
       .possibleBreakpoint:hover {
         color: white;
         background-color: #777;
       }
       .busyBreakpoint {
         color: white;
         background-color: black;
         cursor: wait;
       }
       .unresolvedBreakpoint {
         color: white;
         background-color: #cac;
       }
       .resolvedBreakpoint {
         color: white;
         background-color: #e66;
       }
     </style>
   </template>
 </polymer-element>
 
 <script type="application/dart" src="script_inset.dart"></script>