bug #22971 [Profiler] Fix code excerpt wrapping (ogizanagi)

fabpot · fabpot · commit 6b9ff814c89e · 2017-06-03T08:56:03.000-07:00
This PR was merged into the 3.3 branch. Discussion ---------- [Profiler] Fix code excerpt wrapping | Q | A | ------------- | --- | Branch? | 3.3  | Bug fix? | yesish | New feature? | no  | BC breaks? | no | Deprecations? | no  | Tests pass? | yes | Fixed tickets | N/A  | License | MIT | Doc PR | N/A |Before|After| |--|--| |<img width="1346" alt="screenshot 2017-05-30 a 19 09 03" src="https://cloud.githubusercontent.com/assets/2211145/26595449/b8c4302c-456b-11e7-83c4-3471f915437b.PNG">|<img width="1075" alt="screenshot 2017-05-30 a 19 09 35" src="https://cloud.githubusercontent.com/assets/2211145/26595450/b8c61e64-456b-11e7-8b33-bdbe2e90b160.PNG">| However, I think my own preference for code excerpts would be to never wrap, at the risk of scrolling horizontally. 1024px is enough to read most of the code excerpt without scrolling, and it feels less messy (to me) when a line is too long. WDYT? Commits ------- 6c87863 [Profiler] Never wrap in code excerpts
diff --git a/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig b/src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig
@@ -95,7 +95,7 @@ header .container { display: flex; justify-content: space-between; }
 .trace-head .icon svg { height: 24px; width: 24px; }
 
 .trace-message { font-size: 14px; font-weight: normal; margin: .5em 0 0; }
-
+.trace-details { table-layout: fixed; }
 .trace-line { position: relative; padding-left: 36px; }
 .trace-line.sf-toggle:hover { background: #F5F5F5; }
 .trace-line a { color: #222; }
@@ -108,12 +108,12 @@ header .container { display: flex; justify-content: space-between; }
 .trace-method { color: #B0413E; color: #222; font-weight: bold; color: #B0413E; }
 .trace-arguments { color: #222; color: #999; font-weight: normal; color: #795da3; color: #777; padding-left: 2px; }
 
-.trace-code { background: #FFF; font-size: 12px; margin: 10px 0 2px; padding: 10px; }
-.trace-code ol { margin: 0; }
-.trace-code li { color: #969896; margin: 0; padding-left: 10px; }
-.trace-code li + li { margin-top: 10px; }
-.trace-code li.selected { background: #F8EEC7; padding: 3px 0 3px 10px; }
-.trace-code li code { color: #222; }
+.trace-code { background: #FFF; font-size: 12px; margin: 10px 0 2px; padding: 10px; overflow-x: auto; }
+.trace-code ol { margin: 0; float: left; }
+.trace-code li { color: #969896; margin: 0; padding-left: 10px; float: left; width: 100%; }
+.trace-code li + li { margin-top: 5px; }
+.trace-code li.selected { background: #F8EEC7; padding: 3px 0 3px 10px; margin-top: 2px; }
+.trace-code li code { color: #222; white-space: nowrap; }
 
 .trace-as-text .stacktrace { line-height: 1.8; margin: 0 0 15px; white-space: pre-wrap; }
 
