DefGuard · filipslezaklab · Jan 12, 2026 · Jan 12, 2026 · Jan 12, 2026
diff --git a/web/package.json b/web/package.json
@@ -15,7 +15,7 @@
   "dependencies": {
     "@axa-ch/react-polymorphic-types": "^1.4.1",
     "@floating-ui/react": "^0.27.16",
-    "@inlang/paraglide-js": "^2.7.2",
+    "@inlang/paraglide-js": "^2.8.0",
     "@react-hook/resize-observer": "^2.0.2",
     "@shortercode/webzip": "1.1.1-0",
     "@stablelib/base64": "^2.0.1",
@@ -24,8 +24,8 @@
     "@tanstack/react-form": "^1.27.7",
     "@tanstack/react-query": "^5.90.16",
     "@tanstack/react-query-devtools": "^5.91.2",
-    "@tanstack/react-router": "^1.146.2",
-    "@tanstack/react-router-devtools": "^1.146.2",
+    "@tanstack/react-router": "^1.147.3",
+    "@tanstack/react-router-devtools": "^1.149.0",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.18",
     "@uidotdev/usehooks": "^2.4.1",
@@ -50,19 +50,19 @@
     "rxjs": "^7.8.2",
     "text-case": "^1.2.9",
     "zod": "^4.3.5",
-    "zustand": "^5.0.9"
+    "zustand": "^5.0.10"
   },
   "devDependencies": {
     "@biomejs/biome": "2.3.11",
     "@inlang/paraglide-js": "2.7.2",
     "@tanstack/devtools-vite": "^0.4.1",
-    "@tanstack/router-plugin": "^1.146.3",
+    "@tanstack/router-plugin": "^1.149.0",
     "@types/byte-size": "^8.1.2",
     "@types/humanize-duration": "^3.27.4",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^25.0.3",
+    "@types/node": "^25.0.6",
     "@types/qs": "^6.14.0",
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.8",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react-swc": "^4.2.2",
     "autoprefixer": "^10.4.23",

diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
diff --git a/web/project.inlang/.gitignore b/web/project.inlang/.gitignore
@@ -1 +1,19 @@
-cache
+# IF GIT SHOWED THAT THIS FILE CHANGED
+#
+# 1. RUN THE FOLLOWING COMMAND
+#
+# ---
+# git rm --cached '**/*.inlang/.gitignore'
+# ---
+#
+# 2. COMMIT THE CHANGE
+#
+# ---
+# git commit -m "fix: remove tracked .gitignore from inlang project"
+# ---
+#
+# Inlang handles the gitignore itself starting with version ^2.5.
+#
+# everything is ignored except settings.json
+*
+!settings.json
diff --git a/web/src/pages/ActivityLogPage/ActivityLogPage.tsx b/web/src/pages/ActivityLogPage/ActivityLogPage.tsx
@@ -5,6 +5,7 @@ import { Page } from '../../shared/components/Page/Page';
 import { SizedBox } from '../../shared/defguard-ui/components/SizedBox/SizedBox';
 import { ThemeSpacing } from '../../shared/defguard-ui/types';
 import { isPresent } from '../../shared/defguard-ui/utils/isPresent';
+import { TablePageLayout } from '../../shared/layout/TablePageLayout/TablePageLayout';
 import { ActivityLogTable } from './ActivityLogTable';
 
 export const ActivityLogPage = () => {
@@ -36,18 +37,20 @@ export const ActivityLogPage = () => {
   return (
     <Page id="activity-log-page" title={`Activity log`}>
       <SizedBox height={ThemeSpacing.Xl3} />
-      {isPresent(flatData) && isPresent(pagination) && (
-        <ActivityLogTable
-          data={flatData}
-          pagination={pagination}
-          filters={{}}
-          loadingNextPage={isFetchingNextPage}
-          onNextPage={() => {
-            fetchNextPage();
-          }}
-          hasNextPage={pagination.next_page !== null}
-        />
-      )}
+      <TablePageLayout>
+        {isPresent(flatData) && isPresent(pagination) && (
+          <ActivityLogTable
+            data={flatData}
+            pagination={pagination}
+            filters={{}}
+            loadingNextPage={isFetchingNextPage}
+            onNextPage={() => {
+              fetchNextPage();
+            }}
+            hasNextPage={pagination.next_page !== null}
+          />
+        )}
+      </TablePageLayout>
     </Page>
   );
 };
diff --git a/web/src/pages/GroupsPage/GroupsPage.tsx b/web/src/pages/GroupsPage/GroupsPage.tsx
@@ -2,6 +2,7 @@ import { useSuspenseQuery } from '@tanstack/react-query';
 import { Page } from '../../shared/components/Page/Page';
 import { SizedBox } from '../../shared/defguard-ui/components/SizedBox/SizedBox';
 import { ThemeSpacing } from '../../shared/defguard-ui/types';
+import { TablePageLayout } from '../../shared/layout/TablePageLayout/TablePageLayout';
 import { getGroupsInfoQueryOptions, getUsersQueryOptions } from '../../shared/query';
 import { GroupsTable } from './components/GroupsTable/GroupsTable';
 import { CEGroupModal } from './modals/CEGroupModal/CEGroupModal';
@@ -13,7 +14,9 @@ export const GroupsPage = () => {
     <>
       <Page id="groups-page" title="Groups">
         <SizedBox height={ThemeSpacing.Xl3} />
-        <GroupsTable groups={groups} users={users} />
+        <TablePageLayout>
+          <GroupsTable groups={groups} users={users} />
+        </TablePageLayout>
       </Page>
       <CEGroupModal />
     </>

diff --git a/web/src/pages/NetworkDevicesPage/NetworkDevicesPage.tsx b/web/src/pages/NetworkDevicesPage/NetworkDevicesPage.tsx
@@ -1,5 +1,6 @@
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { Page } from '../../shared/components/Page/Page';
+import { TablePageLayout } from '../../shared/layout/TablePageLayout/TablePageLayout';
 import { getNetworkDevicesQueryOptions } from '../../shared/query';
 import { AddNetworkDeviceModal } from './modals/AddNetworkDeviceModal/AddNetworkDeviceModal';
 import { EditNetworkDeviceModal } from './modals/EditNetworkDeviceModal/EditNetworkDeviceModal';
@@ -13,7 +14,9 @@ export const NetworkDevicesPage = () => {
   return (
     <>
       <Page id="network-devices-page" title="Network Devices">
-        <NetworkDevicesTable networkDevices={networkDevices} />
+        <TablePageLayout>
+          <NetworkDevicesTable networkDevices={networkDevices} />
+        </TablePageLayout>
       </Page>
       <AddNetworkDeviceModal />
       <NetworkDeviceConfigModal />

diff --git a/web/src/pages/RulesPage/RulesPage.tsx b/web/src/pages/RulesPage/RulesPage.tsx
@@ -7,6 +7,7 @@ import { Tabs } from '../../shared/defguard-ui/components/Tabs/Tabs';
 import type { TabsItem } from '../../shared/defguard-ui/components/Tabs/types';
 import { ThemeSpacing } from '../../shared/defguard-ui/types';
 import { isPresent } from '../../shared/defguard-ui/utils/isPresent';
+import { TablePageLayout } from '../../shared/layout/TablePageLayout/TablePageLayout';
 import { getRulesQueryOptions } from '../../shared/query';
 import { RulesDeployedTab } from './tabs/RulesDeployedTab';
 import { RulesPendingTab } from './tabs/RulesPendingTab';
@@ -53,12 +54,14 @@ export const RulesPage = () => {
     <Page title="Rules" id="rules-page">
       <SizedBox height={ThemeSpacing.Md} />
       <Tabs items={tabs} />
-      {activeTab === RulesPageTab.Deployed && isPresent(deployed) && (
-        <RulesDeployedTab rules={deployed} />
-      )}
-      {activeTab === RulesPageTab.Pending && isPresent(pending) && (
-        <RulesPendingTab rules={pending} />
-      )}
+      <TablePageLayout>
+        {activeTab === RulesPageTab.Deployed && isPresent(deployed) && (
+          <RulesDeployedTab rules={deployed} />
+        )}
+        {activeTab === RulesPageTab.Pending && isPresent(pending) && (
+          <RulesPendingTab rules={pending} />
+        )}
+      </TablePageLayout>
     </Page>
   );
 };
diff --git a/web/src/pages/UsersOverviewPage/UsersOverviewPage.tsx b/web/src/pages/UsersOverviewPage/UsersOverviewPage.tsx
@@ -1,11 +1,11 @@
 import { useQuery } from '@tanstack/react-query';
-import { LayoutGrid } from '../../shared/components/LayoutGrid/LayoutGrid';
 import { Page } from '../../shared/components/Page/Page';
 import './style.scss';
 import { m } from '../../paraglide/messages';
 import { AddAuthKeyModal } from '../../shared/components/modals/AddAuthKeyModal/AddAuthKeyModal';
 import { ChangePasswordModal } from '../../shared/components/modals/ChangePasswordModal/ChangePasswordModal';
 import { isPresent } from '../../shared/defguard-ui/utils/isPresent';
+import { TablePageLayout } from '../../shared/layout/TablePageLayout/TablePageLayout';
 import { getUsersQueryOptions } from '../../shared/query';
 import { AddUserModal } from './modals/AddUserModal/AddUserModal';
 import { AssignUsersToGroupsModal } from './modals/AssignUsersToGroupsModal/AssignUsersToGroupsModal';
@@ -17,7 +17,9 @@ export const UsersOverviewPage = () => {
   return (
     <>
       <Page title={m.users_title()} id="users-overview-page">
-        <LayoutGrid>{isPresent(users) && <UsersTable users={users} />}</LayoutGrid>
+        <TablePageLayout>
+          {isPresent(users) && <UsersTable users={users} />}
+        </TablePageLayout>
       </Page>
       <AddUserModal />
       <EditUserModal />

diff --git a/web/src/pages/UsersOverviewPage/UsersTable.tsx b/web/src/pages/UsersOverviewPage/UsersTable.tsx
@@ -23,7 +23,9 @@ import { TableValuesListCell } from '../../shared/components/TableValuesListCell
 import { Avatar } from '../../shared/defguard-ui/components/Avatar/Avatar';
 import { Badge } from '../../shared/defguard-ui/components/Badge/Badge';
 import { Button } from '../../shared/defguard-ui/components/Button/Button';
+import type { ButtonProps } from '../../shared/defguard-ui/components/Button/types';
 import { EmptyState } from '../../shared/defguard-ui/components/EmptyState/EmptyState';
+import { EmptyStateFlexible } from '../../shared/defguard-ui/components/EmptyStateFlexible/EmptyStateFlexible';
 import { Icon } from '../../shared/defguard-ui/components/Icon';
 import { IconButtonMenu } from '../../shared/defguard-ui/components/IconButtonMenu/IconButtonMenu';
 import { Search } from '../../shared/defguard-ui/components/Search/Search';
@@ -52,6 +54,22 @@ export const UsersTable = ({ users }: Props) => {
   const reservedEmails = useMemo(() => users.map((u) => u.email.toLowerCase()), [users]);
   const reservedUsernames = useMemo(() => users.map((u) => u.username), [users]);
 
+  const addButtonProps = useMemo(
+    (): ButtonProps => ({
+      variant: 'primary',
+      text: 'Add new user',
+      iconLeft: 'add-user',
+      testId: 'add-user',
+      onClick: () => {
+        useAddUserModal.getState().open({
+          reservedEmails,
+          reservedUsernames,
+        });
+      },
+    }),
+    [reservedEmails, reservedUsernames],
+  );
+
   const [search, setSearch] = useState('');
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 
@@ -429,6 +447,15 @@ export const UsersTable = ({ users }: Props) => {
     getRowCanExpand: (row) => row.original.devices.length > 0,
   });
 
+  if (users.length === 0)
+    return (
+      <EmptyStateFlexible
+        title={`No users here yet.`}
+        subtitle={`Add users by clicking the button below.`}
+        primaryAction={addButtonProps}
+      />
+    );
+
   return (
     <>
       <TableTop text={m.users_header_title()}>
@@ -455,17 +482,7 @@ export const UsersTable = ({ users }: Props) => {
           initialValue={search}
           onChange={setSearch}
         />
-        <Button
-          iconLeft="add-user"
-          text={m.users_add()}
-          testId="add-user"
-          onClick={() => {
-            useAddUserModal.getState().open({
-              reservedEmails,
-              reservedUsernames,
-            });
-          }}
-        />
+        <Button {...addButtonProps} />
       </TableTop>
       {transformedData.length === 0 && search.length > 0 && (
         <EmptyState
@@ -474,23 +491,6 @@ export const UsersTable = ({ users }: Props) => {
           subtitle={m.search_empty_common_subtitle()}
         />
       )}
-      {transformedData.length === 0 && search.length === 0 && (
-        <EmptyState
-          icon="search"
-          title={m.users_empty_title()}
-          subtitle={m.users_empty_subtitle()}
-          primaryAction={{
-            text: m.users_add(),
-            iconLeft: 'add-user',
-            onClick: () => {
-              useAddUserModal.getState().open({
-                reservedEmails,
-                reservedUsernames,
-              });
-            },
-          }}
-        />
-      )}
       {transformedData.length > 0 && (
         <TableBody
           table={table}

diff --git a/web/src/pages/UsersOverviewPage/style.scss b/web/src/pages/UsersOverviewPage/style.scss
@@ -1,9 +1,4 @@
 #users-overview-page {
-  .table,
-  .table-top {
-    grid-column: 1 / 13;
-  }
-
   .page-content {
     padding-top: var(--spacing-3xl);
     box-sizing: border-box;

diff --git a/web/src/pages/WebhooksPage/WebhooksPage.tsx b/web/src/pages/WebhooksPage/WebhooksPage.tsx
@@ -2,6 +2,7 @@ import { useSuspenseQuery } from '@tanstack/react-query';
 import { Page } from '../../shared/components/Page/Page';
 import { SizedBox } from '../../shared/defguard-ui/components/SizedBox/SizedBox';
 import { ThemeSpacing } from '../../shared/defguard-ui/types';
+import { TablePageLayout } from '../../shared/layout/TablePageLayout/TablePageLayout';
 import { getWebhooksQueryOptions } from '../../shared/query';
 import { CeWebhookModal } from './modals/CEWebhookModal/CEWebhookModal';
 import { WebhooksTable } from './WebhooksTable';
@@ -13,7 +14,9 @@ export const WebhooksPage = () => {
     <>
       <Page id="webhooks-page" title="Webhooks">
         <SizedBox height={ThemeSpacing.Xl3} />
-        <WebhooksTable webhooks={webhooks} />
+        <TablePageLayout>
+          <WebhooksTable webhooks={webhooks} />
+        </TablePageLayout>
       </Page>
       <CeWebhookModal />
     </>

diff --git a/web/src/pages/settings/SettingsSmtpPage/SendTestEmailModal.tsx b/web/src/pages/settings/SettingsSmtpPage/SendTestEmailModal.tsx
@@ -82,6 +82,7 @@ const ModalContent = () => {
       <AppText font={TextStyle.TBodySm400} color={ThemeVariable.FgMuted}>
         {`Check if your SMTP configuration works by sending a test email.`}
       </AppText>
+      <SizedBox height={ThemeSpacing.Xl2} />
       <form
         onSubmit={(e) => {
           e.stopPropagation();

diff --git a/web/src/shared/defguard-ui b/web/src/shared/defguard-ui
diff --git a/web/src/shared/hooks/modalControls/modalsSubjects.ts b/web/src/shared/hooks/modalControls/modalsSubjects.ts
@@ -36,6 +36,7 @@ type PayloadOf<N extends ModalNameValue> =
   }
     ? D
     : undefined;
+
 export function openModal<N extends ModalNameValue>(
   name: N,
   ...args: PayloadOf<N> extends undefined ? [] : [PayloadOf<N>]
@@ -44,5 +45,9 @@ export function openModal<N extends ModalNameValue>(
     args.length === 0 ? { name } : { name, data: args[0] }
   ) as ModalOpenEvent;
 
+  // blur whatever right now has focus
+  const activeElement = document.activeElement as HTMLElement | null;
+  activeElement?.blur();
+
   openModalSubject.next(event);
 }
diff --git a/web/src/shared/layout/TablePageLayout/TablePageLayout.tsx b/web/src/shared/layout/TablePageLayout/TablePageLayout.tsx
@@ -0,0 +1,7 @@
+import './style.scss';
+import type { PropsWithChildren } from 'react';
+import { LayoutGrid } from '../../components/LayoutGrid/LayoutGrid';
+
+export const TablePageLayout = ({ children }: PropsWithChildren) => {
+  return <LayoutGrid className="table-page-layout">{children}</LayoutGrid>;
+};
diff --git a/web/src/shared/layout/TablePageLayout/style.scss b/web/src/shared/layout/TablePageLayout/style.scss
@@ -0,0 +1,7 @@
+.table-page-layout {
+  .flexible-empty-state,
+  .table-top,
+  .table {
+    grid-column: 1 / 13;
+  }
+}
+2 −0		components/Textarea/Textarea.tsx
+2 −1		components/Textarea/types.ts
+12 −11		components/table/TableHeaderCell/TableHeaderCell.tsx
+10 −1		providers/snackbar/SnackbarElement/SnackbarElement.tsx
+4 −0		providers/snackbar/SnackbarElement/style.scss
+8 −0		scss/_base.scss