Fix overflow on detail elements with long paths (#414)

Prevent file path wrapping and add a horizontal scroll bar if the modified files or source patterns are long. Eventually, we should relax the maximum width on rule blocks to reduce the need for this, but for now, this is better than text breaking out of the container.
palantir · May 2, 2022 · 1eb0e44 · 1eb0e44
1 parent 7a24083
commit 1eb0e44
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/server/assets/css/main.css b/server/assets/css/main.css
@@ -211,4 +211,8 @@ details summary > * {
   font-size: 0.8125rem;
 }
 
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
 /* end custom utilities */
diff --git a/server/templates/details.html.tmpl b/server/templates/details.html.tmpl
@@ -59,7 +59,7 @@
     {{if (or .PredicateResults (hasRequires .Requires))}}
     <details class="bg-light-gray5 p-2 mt-2 text-sm">
       <summary class="text-dark-gray3 font-semibold">Details</summary>
-      <div class="border-t border-light-gray3 mt-2">
+      <div class="border-t border-light-gray3 mt-2 overflow-x-auto whitespace-nowrap">
        {{if .PredicateResults}}
           <div class="pt-2">
             {{template "result-predicates-details" .}}