fix(vendors): truncate long locations in table

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 === "—" ? (
           "—"

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) => ({