update openid table page

web/src/pages/GroupsPage/components/GroupsTable/GroupsTable.tsx

@@ -52,16 +52,14 @@ export const GroupsTable = ({ groups, users }: Props) => {
     () => [
       columnHelper.accessor('name', {
         header: m.groups_col_name(),
+        minSize: 250,
+        enableSorting: true,
         sortingFn: 'text',
         cell: (info) => (
           <TableCell>
             <span>{info.getValue()}</span>
           </TableCell>
         ),
-        meta: {
-          flex: true,
-        },
-        enableSorting: true,
       }),
       columnHelper.display({
         size: 108,

web/src/pages/OpenIdPage/OpenIdPage.tsx

@@ -1,19 +1,20 @@
-import { useSuspenseQuery } from '@tanstack/react-query';
+import { Suspense } from 'react';
 import { m } from '../../paraglide/messages';
 import { Page } from '../../shared/components/Page/Page';
+import { TableSkeleton } from '../../shared/components/skeleton/TableSkeleton/TableSkeleton';
 import { SizedBox } from '../../shared/defguard-ui/components/SizedBox/SizedBox';
 import { ThemeSpacing } from '../../shared/defguard-ui/types';
-import { getOpenIdClientQueryOptions } from '../../shared/query';
 import { CeOpenIdClientModal } from './modals/CEOpenIdClientModal/CEOpenIdClientModal';
 import { OpenIdClientTable } from './OpenIdTable';
 
 export const OpenIdPage = () => {
-  const { data } = useSuspenseQuery(getOpenIdClientQueryOptions);
   return (
     <>
       <Page title={m.openid_title()} id="openid-page">
         <SizedBox height={ThemeSpacing.Xl3} />
-        <OpenIdClientTable data={data} />
+        <Suspense fallback={<TableSkeleton />}>
+          <OpenIdClientTable />
+        </Suspense>
       </Page>
       <CeOpenIdClientModal />
     </>

web/src/pages/OpenIdPage/OpenIdTable.tsx

@@ -1,4 +1,4 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useSuspenseQuery } from '@tanstack/react-query';
 import {
   createColumnHelper,
   getCoreRowModel,
@@ -22,16 +22,15 @@ import { TableTop } from '../../shared/defguard-ui/components/table/TableTop/Tab
 import { useClipboard } from '../../shared/defguard-ui/hooks/useClipboard';
 import { openModal } from '../../shared/hooks/modalControls/modalsSubjects';
 import { ModalName } from '../../shared/hooks/modalControls/modalTypes';
+import { getOpenIdClientQueryOptions } from '../../shared/query';
 
 type RowData = OpenIdClient;
 
 const columnHelper = createColumnHelper<RowData>();
 
-type Props = {
-  data: OpenIdClient[];
-};
+export const OpenIdClientTable = () => {
+  const { data } = useSuspenseQuery(getOpenIdClientQueryOptions);
 
-export const OpenIdClientTable = ({ data }: Props) => {
   const reservedNames = useMemo(
     () => data.map((c) => c.name.toLowerCase().replaceAll(' ', '')),
     [data],
@@ -73,9 +72,7 @@ export const OpenIdClientTable = ({ data }: Props) => {
         header: 'App name',
         enableSorting: true,
         sortingFn: 'text',
-        meta: {
-          flex: true,
-        },
+        minSize: 300,
         cell: (info) => (
           <TableCell>
             <span>{info.getValue()}</span>
@@ -84,7 +81,7 @@ export const OpenIdClientTable = ({ data }: Props) => {
       }),
       columnHelper.accessor('enabled', {
         header: 'Status',
-        size: 600,
+        minSize: 180,
         cell: (info) => (
           <TableCell>
             {info.getValue() ? (

web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/ProfileAuthCard.tsx

@@ -22,9 +22,6 @@ import {
   type UserMfaMethodValue,
 } from '../../../../../../../shared/api/types';
 import { Badge } from '../../../../../../../shared/defguard-ui/components/Badge/Badge';
-import { TooltipContent } from '../../../../../../../shared/defguard-ui/providers/tooltip/TooltipContent';
-import { TooltipProvider } from '../../../../../../../shared/defguard-ui/providers/tooltip/TooltipContext';
-import { TooltipTrigger } from '../../../../../../../shared/defguard-ui/providers/tooltip/TooltipTrigger';
 import { ThemeSpacing } from '../../../../../../../shared/defguard-ui/types';
 import { openModal } from '../../../../../../../shared/hooks/modalControls/modalsSubjects';
 import { ModalName } from '../../../../../../../shared/hooks/modalControls/modalTypes';
@@ -452,18 +449,9 @@ const FactorRow = ({
         </div>
         <div className="row availability">
           <div className="fill"></div>
-          <TooltipProvider>
-            <TooltipTrigger>
-              <p className="availability">
-                {showSmtpDisabledWarning
-                  ? m.state_smtp_not_configured()
-                  : availabilityText}
-              </p>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>{m.test_placeholder()}</p>
-            </TooltipContent>
-          </TooltipProvider>
+          <p className="availability">
+            {showSmtpDisabledWarning ? m.state_smtp_not_configured() : availabilityText}
+          </p>
         </div>
       </div>
       <div className="controls">

web/src/routes/_authorized/_default/openid.tsx

@@ -1,10 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router';
 import { OpenIdPage } from '../../../pages/OpenIdPage/OpenIdPage';
-import { getOpenIdClientQueryOptions } from '../../../shared/query';
 
 export const Route = createFileRoute('/_authorized/_default/openid')({
   component: OpenIdPage,
-  loader: ({ context }) => {
-    return context.queryClient.ensureQueryData(getOpenIdClientQueryOptions);
-  },
 });