From 2a42f97d60804b1c1fde6de72e5604580e652762 Mon Sep 17 00:00:00 2001
From: Codex Review Integration <codex-review@local.invalid>
Date: Fri, 28 Aug 2026 11:17:15 -0300
Subject: [PATCH] fix(vendors): truncate long locations in table

---
 .../vendors/_components/vendors-table.tsx     | 26 +++++++++++++-
 .../(protected)/vendors/vendors-list.test.tsx | 35 +++++++++++++++++++
 2 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/src/app/(protected)/vendors/_components/vendors-table.tsx b/src/app/(protected)/vendors/_components/vendors-table.tsx
index a680c78b..5c1009dc 100644
--- a/src/app/(protected)/vendors/_components/vendors-table.tsx
+++ b/src/app/(protected)/vendors/_components/vendors-table.tsx
@@ -51,6 +51,28 @@ function stopPropagation(event: MouseEvent): void {
   event.stopPropagation();
 }
 
+function VendorLocation({ value }: { value: string }) {
+  const hasLocation = value !== "—";
+
+  return (
+    <Tooltip title={hasLocation ? value : ""} placement="top" arrow describeChild>
+      <Box
+        component="span"
+        tabIndex={hasLocation ? 0 : undefined}
+        sx={{
+          display: "block",
+          maxWidth: "100%",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+        }}
+      >
+        {value}
+      </Box>
+    </Tooltip>
+  );
+}
+
 interface VendorTableRowProps {
   row: VendorListItem;
   onOpenDetail: (row: VendorListItem) => void;
@@ -108,7 +130,9 @@ function VendorTableRow({ row, onOpenDetail, onOpenEdit }: VendorTableRowProps)
           </Text>
         </Stack>
       </TableCell>
-      <TableCell sx={{ color: "var(--color-muted-foreground)" }}>{locationText}</TableCell>
+      <TableCell sx={{ color: "var(--color-muted-foreground)", overflow: "hidden" }}>
+        <VendorLocation value={locationText} />
+      </TableCell>
       <TableCell sx={{ color: "var(--color-muted-foreground)" }}>
         {primaryTrade === "—" ? (
           "—"
diff --git a/src/test/app/(protected)/vendors/vendors-list.test.tsx b/src/test/app/(protected)/vendors/vendors-list.test.tsx
index 8d51d3cf..1c45d8f6 100644
--- a/src/test/app/(protected)/vendors/vendors-list.test.tsx
+++ b/src/test/app/(protected)/vendors/vendors-list.test.tsx
@@ -181,6 +181,41 @@ describe("VendorsListPage", () => {
     expect(screen.queryByText(/555-0198/)).not.toBeInTheDocument();
   });
 
+  it("keeps a long address inside the Location column and reveals the full value", async () => {
+    setupDefaults();
+    const longAddress = "New York, NY, Estados Unidos, 123 Long Address Avenue";
+    const fallbackVendor: VendorListItem = {
+      ...activeVendor,
+      id: 4,
+      address: longAddress,
+      city: "",
+      state: "",
+    };
+    useVendorsList.mockImplementation((params: { isActive?: boolean; pageSize?: number }) => {
+      if (params.pageSize === 1) return result([], 1);
+      return params.isActive ? result([fallbackVendor], 1) : result([], 0);
+    });
+
+    renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
+
+    const locationCell = screen.getByRole("cell", { name: longAddress });
+    const locationText = within(locationCell).getByText(longAddress);
+    expect(locationCell).toHaveStyle({ overflow: "hidden" });
+    expect(locationText).toHaveStyle({
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+    });
+
+    await userEvent.hover(locationText);
+    expect(await screen.findByRole("tooltip")).toHaveTextContent(longAddress);
+
+    await userEvent.unhover(locationText);
+    locationText.focus();
+    expect(locationText).toHaveFocus();
+    expect(await screen.findByRole("tooltip")).toHaveTextContent(longAddress);
+  });
+
   it("reports the filtered totalCount in the footer when page rows are fewer than total", () => {
     setupDefaults();
     const pageVendors = Array.from({ length: 3 }, (_, index) => ({