Don't allow variables to overwrite the frame edge.

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

 <link rel="import" href="../../../../packages/polymer/polymer.html">
 <link rel="import" href="function_ref.html">
 <link rel="import" href="nav_bar.html">
 <link rel="import" href="eval_link.html">
 <link rel="import" href="observatory_element.html">
 <link rel="import" href="script_inset.html">
 <link rel="import" href="script_ref.html">
 
 <!-- TODO(turnidge): Use core-icon once core_elements work properly in
      devtools -->
@@ skipping 216 matching lines @@
         display: inline-block;
       }
       .flex-item-script {
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 765px;
       }
       .flex-item-vars {
         flex-grow: 5;
         flex-shrink: 0;
-        flex-basis: 225px;
+        flex-basis: 250px;
+        overflow-x: hidden;
       }
     </style>
     <div id="frameOuter" class="frameOuter">
       <a on-click="{{ toggleExpand }}">
         <div class="frameSummary">
           <div class="frameSummaryText">
             <div class="frameId"><b>frame {{ frame.index }}</b></div>
             <function-ref ref="{{ frame.function }}"></function-ref>
             ( <source-link location="{{ frame.location }}"></source-link> )
           </div>
@@ skipping 198 matching lines @@
         padding: 5px;
         font: 400 16px consolas, courier, monospace;
         width: 95%;
       }
     </style>
     <input id="textBox" class="textBox" type="text" value="{{ text }}" autofocus>
   </template>
 </polymer-element>
 
 <script type="application/dart" src="debugger.dart"></script>