diff --git a/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-empty.png b/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-empty.png
index d46447cb..e1f39609 100644
Binary files a/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-empty.png and b/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-empty.png differ
diff --git a/e2e/vendors/vendors.visual.spec.ts b/e2e/vendors/vendors.visual.spec.ts
index cee62058..013c80fd 100644
--- a/e2e/vendors/vendors.visual.spec.ts
+++ b/e2e/vendors/vendors.visual.spec.ts
@@ -236,8 +236,12 @@ test.describe("Vendor deterministic pixel regression", () => {
 
   test("empty", async ({ page }) => {
     await openVendorPage(page, "empty");
-    await expect(page.getByText("No active companies found")).toBeVisible();
+    const emptyState = page.getByText("No active companies found");
+    await expect(emptyState).toBeVisible();
     await expectStableScreenshot(page, "vendor-empty.png");
+
+    await page.setViewportSize({ width: 390, height: 844 });
+    await expect(emptyState).toBeInViewport();
   });
 
   test("error", async ({ page }) => {
diff --git a/src/app/(protected)/vendors/_components/vendors-table.tsx b/src/app/(protected)/vendors/_components/vendors-table.tsx
index 7ea40ad4..acbf10c6 100644
--- a/src/app/(protected)/vendors/_components/vendors-table.tsx
+++ b/src/app/(protected)/vendors/_components/vendors-table.tsx
@@ -52,7 +52,15 @@ export function VendorsTable({
     <TableContainer
       component={Paper}
       variant="outlined"
-      sx={{ mt: 2, mb: 2, flex: "1 1 auto", overflow: "auto", borderRadius: 1.5, fontSize: 13 }}
+      sx={{
+        mt: 2,
+        mb: 2,
+        flex: "1 1 auto",
+        overflow: "auto",
+        borderRadius: 1.5,
+        fontSize: 13,
+        containerType: "inline-size",
+      }}
     >
       <Table
         size="small"
@@ -104,14 +112,16 @@ export function VendorsTable({
         <TableBody>
           {isLoading ? (
             <TableRow>
-              <TableCell colSpan={columnCount} align="center" className="py-10">
-                <CircularProgress size={28} />
+              <TableCell colSpan={columnCount} className="py-10">
+                <Stack sx={{ width: "calc(100cqw - 24px)", alignItems: "center" }}>
+                  <CircularProgress size={28} />
+                </Stack>
               </TableCell>
             </TableRow>
           ) : showEmptyRow ? (
             <TableRow>
-              <TableCell colSpan={columnCount} align="center" className="py-10">
-                <Stack spacing={1} sx={{ alignItems: "center" }}>
+              <TableCell colSpan={columnCount} className="py-10">
+                <Stack spacing={1} sx={{ width: "calc(100cqw - 24px)", alignItems: "center" }}>
                   <SearchOffOutlinedIcon sx={{ color: "text.secondary", fontSize: 32 }} />
                   <Text
                     variant="description"