bug symfony#47731 [WebProfiler] Fix overflow issue in Forms panel (zolikonta)

fabpot · fabpot · commit 289d6b41f474 · 2022-10-01T15:28:23.000+02:00
This PR was merged into the 4.4 branch. Discussion ---------- [WebProfiler] Fix overflow issue in Forms panel | Q | A | ------------- | --- | Branch? | 4.4 | Bug fix? | yes | New feature? | no | Deprecations? | no | Tickets | no | License | MIT | Doc PR | no Fix overflow issue in WebProfiler Forms panel Hides overflowing content in the tree view and adds ellipsis to the end. Also adds title attribute with the field names so they get shown fully on hover. Before: ![Screenshot 2022-09-29 at 15-49-43 Symfony Profiler](https://user-images.githubusercontent.com/16335756/193056904-d1191aeb-7a13-46d9-87d6-3a9ee2746a07.png) After: ![Screenshot 2022-09-29 at 15-49-44 Symfony Profiler](https://user-images.githubusercontent.com/16335756/193056898-cae76da1-8fc3-4610-9636-0840390105e4.png) You might want to consider widening `#tree-menu` especially in `width-full`. This PR applies to 4.4 and 5.4 branch as well not sure about 6.2 though I noticed a redesign but haven't got the chance to check it out. Thank you Commits ------- 14712aa fix overflow issue in WebPprofiler Forms panel
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
@@ -90,7 +90,8 @@
             cursor: pointer;
             padding: 5px 7px 5px 22px;
             position: relative;
-
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
         .tree .toggle-button {
             /* provide a bigger clickable area than just 10x10px */
@@ -449,7 +450,7 @@
     {% import _self as tree %}
     {% set has_error = data.errors is defined and data.errors|length > 0 %}
     <li>
-        <div class="tree-inner" data-tab-target-id="{{ data.id }}-details">
+        <div class="tree-inner" data-tab-target-id="{{ data.id }}-details" title="{{ name|default('(no name)') }}">
             {% if has_error %}
                 <div class="badge-error">{{ data.errors|length }}</div>
             {% endif %}
