fix(traces): span header wrap, empty stacktrace layout, Eval Jobs Name width (#16035)

web/src/enterprise/components/onlineEvals/EvalJobList.spec.ts

@@ -0,0 +1,57 @@
+// Copyright 2026 OpenObserve Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// @vitest-environment jsdom
+
+import { describe, expect, it, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import { defineComponent } from "vue";
+
+vi.mock("@/types/i18n", async (importOriginal) => {
+  const actual: any = await importOriginal();
+  return { ...actual, useI18nTyped: () => ({ t: (key: string) => key }) };
+});
+
+vi.mock("@/lib/vue-shortcut-manager", () => ({ useShortcuts: vi.fn() }));
+
+import EvalJobList from "./EvalJobList.vue";
+
+const OTableStub = defineComponent({
+  name: "OTable",
+  props: { columns: { type: Array, default: () => [] } },
+  template: "<div data-test='eval-job-list-table' />",
+});
+
+function mountList() {
+  return mount(EvalJobList, {
+    props: { rows: [], search: "" },
+    global: {
+      stubs: {
+        OTable: OTableStub,
+        EvalListShell: { template: "<div><slot name='table' /></div>" },
+      },
+    },
+  });
+}
+
+describe("EvalJobList columns", () => {
+  it("gives the flex Name column a 160px floor so the fixed columns cannot squeeze it", () => {
+    const columns = mountList().findComponent(OTableStub).props("columns") as any[];
+    const name = columns.find((c) => c.id === "name");
+    expect(name).toBeDefined();
+    expect(name.meta.flex).toBe(true);
+    expect(name.minSize).toBe(160);
+  });
+});

web/src/enterprise/components/onlineEvals/EvalJobList.vue

@@ -337,6 +337,7 @@ const columns = computed(() =>
       accessorKey: "name",
       sortable: true,
       size: COL.name,
+      minSize: 160,
       // `flex` (not `autoWidth`): fills leftover width on load AND stays
       // resizable — matches Dashboards/AlertList; `autoWidth` has no resize grip.
       meta: { align: "left", flex: true },

web/src/plugins/traces/TraceDetailsSidebar.spec.ts

@@ -396,6 +396,17 @@ describe("TraceDetailsSidebar", async () => {
     expect(spanId.text()).toContain(mockSpan.span_id);
   });
 
+  it("wraps the header chips and keeps the action group from shrinking", () => {
+    const chips = wrapper.find('[data-test="trace-details-sidebar-header-toolbar-chips"]');
+    const actions = wrapper.find('[data-test="trace-details-sidebar-header-toolbar-actions"]');
+    expect(chips.classes()).toEqual(expect.arrayContaining(["flex-wrap", "min-w-0"]));
+    expect(chips.classes()).not.toContain("flex-nowrap");
+    expect(actions.classes()).toContain("shrink-0");
+    expect(
+      actions.find('[data-test="trace-details-sidebar-header-toolbar-span-id"]').exists(),
+    ).toBe(true);
+  });
+
   it("should emit close when close button is clicked", async () => {
     const closeBtn = wrapper.find('[data-test="trace-details-sidebar-header-close-btn"]');
     expect(closeBtn.exists()).toBe(true);

web/src/plugins/traces/TraceDetailsSidebar.vue

@@ -64,7 +64,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     >
       <!-- Row 1: Trace Details -->
       <div class="flex flex-nowrap items-center justify-between overflow-x-auto p-1">
-        <div class="flex flex-nowrap items-center">
+        <div
+          class="flex min-w-0 flex-wrap items-center gap-y-1"
+          data-test="trace-details-sidebar-header-toolbar-chips"
+        >
           <!-- Service Badge -->
           <OTag
             type="metricChip"
@@ -177,7 +180,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </OTag>
         </div>
 
-        <div class="flex items-center">
+        <div
+          class="flex shrink-0 items-center"
+          data-test="trace-details-sidebar-header-toolbar-actions"
+        >
           <!-- Span ID Badge -->
           <OTag
             type="metricChip"
@@ -2943,7 +2949,8 @@ export default defineComponent({
     border-bottom: none;
   }
 
-  td span {
+  /* The error tab's empty state is an icon+text flex row; a full-width span there squeezes the text to one letter per line. */
+  td span:not([data-test="exception-stacktrace-empty"] span) {
     display: inline-block;
     width: 100%;
     word-break: break-word;