fix: constrain request path table cells

Author: nanookclaw

DebugProbe.AspNetCore.Tests/Rendering/HtmlRendererTests.cs

@@ -1,4 +1,5 @@
 using DebugProbe.AspNetCore.Internal.Rendering;
+using DebugProbe.AspNetCore.Internal.Resources;
 using DebugProbe.AspNetCore.Models;
 
 namespace DebugProbe.AspNetCore.Tests.Rendering;
@@ -26,6 +27,40 @@ public void Render_index_page_builds_page_with_entries()
         Assert.Contains("200", html);
     }
 
+    [Fact]
+    public void Render_index_page_constrains_path_cell_and_preserves_full_path_title()
+    {
+        var path = "/" + new string('a', 240);
+        var query = "?filter=" + new string('b', 120);
+        var fullPath = path + query;
+
+        var html = HtmlRenderer.RenderIndexPage(
+        [
+            new DebugEntry
+            {
+                Id = "trace-1",
+                Method = "GET",
+                Path = path,
+                Query = query,
+                StatusCode = 200,
+                Timestamp = new DateTimeOffset(2026, 1, 2, 3, 4, 5, TimeSpan.Zero)
+            }
+        ]);
+
+        Assert.Contains($@"<td class=""request-path""><span class=""request-path-value"" title=""{fullPath}"">{fullPath}</span></td>", html);
+    }
+
+    [Fact]
+    public void Embedded_css_keeps_request_index_table_fixed_with_ellipsized_paths()
+    {
+        Assert.Contains("#requestTable", EmbeddedResources.Css);
+        Assert.Contains("table-layout: fixed;", EmbeddedResources.Css);
+        Assert.Contains(".request-path-value", EmbeddedResources.Css);
+        Assert.Contains("overflow: hidden;", EmbeddedResources.Css);
+        Assert.Contains("text-overflow: ellipsis;", EmbeddedResources.Css);
+        Assert.Contains("white-space: nowrap;", EmbeddedResources.Css);
+    }
+
     [Fact]
     public void Details_page_renders_captured_values()
     {

DebugProbe.AspNetCore/Assets/css/debugprobe.css

@@ -429,6 +429,30 @@ table {
     border-collapse: collapse;
 }
 
+#requestTable {
+    table-layout: fixed;
+}
+
+#requestTable th:nth-child(1),
+#requestTable td:nth-child(1) {
+    width: 80px;
+}
+
+#requestTable th:nth-child(2),
+#requestTable td:nth-child(2) {
+    width: 96px;
+}
+
+#requestTable th:nth-child(4),
+#requestTable td:nth-child(4) {
+    width: 92px;
+}
+
+#requestTable th:nth-child(5),
+#requestTable td:nth-child(5) {
+    width: 100px;
+}
+
 .table-wrap {
     overflow-x: auto;
     background: #fff;
@@ -463,6 +487,18 @@ tbody tr:last-child td {
     cursor: pointer;
 }
 
+.request-path {
+    min-width: 0;
+}
+
+.request-path-value {
+    display: block;
+    overflow: hidden;
+    max-width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .method-pill {
     display: inline-flex;
     min-width: 60px;
@@ -1092,4 +1128,3 @@ pre {
     background: #4a1717;
     color: #ff8a8a !important;
 }
-

DebugProbe.AspNetCore/Internal/Rendering/HtmlRenderer.cs

@@ -26,19 +26,23 @@ public static string RenderIndexPage(List<DebugEntry> items)
     {
         const int slowRequestThresholdMs = 1000;
 
-        var rows = string.Join("", items.Select(x => $@"
+        var rows = string.Join("", items.Select(x =>
+        {
+            var pathWithQuery = string.IsNullOrEmpty(x.Query) ? x.Path : $"{x.Path}{x.Query}";
+
+            return $@"
         <tr data-url=""/debug/{Encode(x.Id)}""
             data-method=""{Encode(x.Method)}""
             data-status-family=""{x.StatusCode / 100}""
             data-search=""{Encode($"{x.Id} {x.Method} {x.Path} {x.Query} {x.StatusCode}")}""
             class=""clickable-row"">
             <td>{x.Timestamp:HH:mm:ss}</td>
             <td><span class=""method-pill"">{Encode(x.Method)}</span></td>
-            <td>{Encode(string.IsNullOrEmpty(x.Query) ? x.Path : $"{x.Path}{x.Query}")}</td>
+            <td class=""request-path""><span class=""request-path-value"" title=""{Encode(pathWithQuery)}"">{Encode(pathWithQuery)}</span></td>
             <td><span class=""status {GetStatusClass(x.StatusCode)}"">{x.StatusCode}</span></td>
             <td>{x.DurationMs} ms</td>
-        </tr>"
-        ));
+        </tr>";
+        }));
 
         if (string.IsNullOrEmpty(rows))
             rows = "<tr class='empty-row'><td colspan='5'>No data</td></tr>";