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 (
+
+
+ {value}
+
+
+ );
+}
+
interface VendorTableRowProps {
row: VendorListItem;
onOpenDetail: (row: VendorListItem) => void;
@@ -108,7 +130,9 @@ function VendorTableRow({ row, onOpenDetail, onOpenEdit }: VendorTableRowProps)
- {locationText}
+
+
+
{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(, { 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) => ({