fixed display issue with overlapping text in callstack item

fixes #4763

framework/CHANGELOG.md

@@ -4,6 +4,7 @@ Yii Framework 2 Change Log
 2.0.6 under development
 -----------------------
 
+- Bug #4763: Fixed display issue with overlapping call stack item on exception display page (cebe)
 - Bug #7305: Logging of Exception objects resulted in failure of the logger i.e. no logs being written (cebe)
 - Bug #7374: Use proper INSERT syntax with default values when no values are specified (nineinchnick)
 - Bug #7707: client-side `trim` validator now passes the trimmed value to subsequent validators (nkovacs)

framework/views/errorHandler/callStackItem.php

@@ -16,14 +16,16 @@
         <div class="element">
             <span class="item-number"><?= (int) $index ?>.</span>
             <span class="text"><?php if ($file !== null) echo 'in ' . $handler->htmlEncode($file); ?></span>
+            <span class="at">
+                <?php if ($line !== null) echo 'at line'; ?>
+                <span class="line"><?php if ($line !== null) echo (int) $line + 1; ?></span>
+            </span>
             <?php if ($method !== null): ?>
                 <span class="call">
                     <?php if ($file !== null) echo '&ndash;'; ?>
                     <?= ($class !== null ? $handler->addTypeLinks("$class::$method") : $handler->htmlEncode($method)) . '(' . $handler->argumentsToString($args) . ')' ?>
                 </span>
             <?php endif; ?>
-            <span class="at"><?php if ($line !== null) echo 'at line'; ?></span>
-            <span class="line"><?php if ($line !== null) echo (int) $line + 1; ?></span>
         </div>
     </div>
     <?php if (!empty($lines)): ?>

framework/views/errorHandler/exception.php

@@ -52,8 +52,11 @@ h1,h2,h3,p,img,ul li{
     font-family: Arial,sans-serif;
     color: #505050;
 }
-html,body{
-    overflow-x: hidden;
+/*corresponds to min-width of 860px for some elements (.header .footer .element ...)*/
+@media screen and (min-width: 960px) {
+    html,body{
+        overflow-x: hidden;
+    }
 }
 
 /* header */
@@ -152,6 +155,7 @@ html,body{
 .call-stack ul li .element-wrap{
     cursor: pointer;
     padding: 15px 0;
+    background-color: #fdfdfd;
 }
 .call-stack ul li.application .element-wrap{
     background-color: #fafafa;
@@ -164,7 +168,6 @@ html,body{
     margin: 0 auto;
     padding: 0 50px;
     position: relative;
-    white-space: nowrap;
 }
 .call-stack ul li a{
     color: #505050;
@@ -183,17 +186,19 @@ html,body{
     color: #505050;
 }
 .call-stack ul li .at{
-    position: absolute;
-    right: 110px; /* 50px + 60px */
+    float: right;
+    display: inline-block;
+    width: 7em;
+    padding-left: 1em;
+    text-align: left;
     color: #aaa;
 }
 .call-stack ul li.application .at{
     color: #505050;
 }
 .call-stack ul li .line{
-    position: absolute;
-    right: 50px;
-    width: 60px;
+    display: inline-block;
+    width: 3em;
     text-align: right;
 }
 .call-stack ul li .code-wrap{
@@ -209,7 +214,7 @@ html,body{
     position: absolute;
     width: 100%;
     z-index: 100;
-    margin-top: -61px;
+    margin-top: 0;
 }
 .call-stack ul li .hover-line{
     background: none;
@@ -233,7 +238,7 @@ html,body{
     color: #aaa;
     line-height: 20px;
     font-size: 12px;
-    margin-top: -63px;
+    margin-top: 1px;
     font-family: Consolas, Courier New, monospace;
 }
 .call-stack ul li .code pre{
@@ -443,7 +448,7 @@ window.onload = function() {
         if (!Sizzle('pre', callStackItem)[0]) {
             return;
         }
-        var top = callStackItem.offsetTop - window.pageYOffset,
+        var top = Sizzle('.code-wrap', callStackItem)[0].offsetTop - window.pageYOffset + 3,
             lines = Sizzle('pre', callStackItem)[0].getClientRects(),
             lineNumbers = Sizzle('.lines-item', callStackItem),
             errorLine = Sizzle('.error-line', callStackItem)[0],
@@ -453,10 +458,10 @@ window.onload = function() {
                 continue;
             }
             lineNumbers[i].style.top = parseInt(lines[i].top - top) + 'px';
-            hoverLines[i].style.top = parseInt(lines[i].top - top - 3) + 'px';
+            hoverLines[i].style.top = parseInt(lines[i].top - top) + 'px';
             hoverLines[i].style.height = parseInt(lines[i].bottom - lines[i].top + 6) + 'px';
             if (parseInt(callStackItem.getAttribute('data-line')) == i) {
-                errorLine.style.top = parseInt(lines[i].top - top - 3) + 'px';
+                errorLine.style.top = parseInt(lines[i].top - top) + 'px';
                 errorLine.style.height = parseInt(lines[i].bottom - lines[i].top + 6) + 'px';
             }
         }