UI fixes

apps/client/src/components/ui/responsive-settings-row.tsx

@@ -0,0 +1,47 @@
+import { Box } from "@mantine/core";
+import React from "react";
+
+interface ResponsiveSettingsRowProps {
+  children: React.ReactNode;
+}
+
+export function ResponsiveSettingsRow({ children }: ResponsiveSettingsRowProps) {
+  return (
+    <Box
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        gap: "1rem",
+        flexWrap: "wrap",
+      }}
+    >
+      {children}
+    </Box>
+  );
+}
+
+interface ResponsiveSettingsContentProps {
+  children: React.ReactNode;
+}
+
+export function ResponsiveSettingsContent({ children }: ResponsiveSettingsContentProps) {
+  return (
+    <Box style={{ flex: "1 1 300px", minWidth: 0 }}>
+      {children}
+    </Box>
+  );
+}
+
+interface ResponsiveSettingsControlProps {
+  children: React.ReactNode;
+}
+
+export function ResponsiveSettingsControl({ children }: ResponsiveSettingsControlProps) {
+  return (
+    <Box style={{ flex: "0 0 auto" }}>
+      {children}
+    </Box>
+  );
+}

apps/client/src/ee/mfa/components/mfa-settings.tsx

@@ -9,6 +9,7 @@ import { MfaDisableModal } from "@/ee/mfa";
 import { MfaBackupCodesModal } from "@/ee/mfa";
 import { isCloud } from "@/lib/config.ts";
 import useLicense from "@/ee/hooks/use-license.tsx";
+import { ResponsiveSettingsRow, ResponsiveSettingsContent, ResponsiveSettingsControl } from "@/components/ui/responsive-settings-row";
 
 export function MfaSettings() {
   const { t } = useTranslation();
@@ -53,8 +54,8 @@ export function MfaSettings() {
 
   return (
     <>
-      <Group justify="space-between" wrap="nowrap" gap="xl">
+      <ResponsiveSettingsRow>
-        <div style={{ minWidth: 0, flex: 1 }}>
+        <ResponsiveSettingsContent>
           <Text size="md">{t("2-step verification")}</Text>
           <Text size="sm" c="dimmed">
             {!isMfaEnabled
@@ -63,8 +64,9 @@ export function MfaSettings() {
                 )
               : t("Two-factor authentication is active on your account.")}
           </Text>
-        </div>
+        </ResponsiveSettingsContent>
 
+        <ResponsiveSettingsControl>
           {!isMfaEnabled ? (
             <Tooltip
               label={t("Available in enterprise edition")}
@@ -100,7 +102,8 @@ export function MfaSettings() {
               </Button>
             </Group>
           )}
-      </Group>
+        </ResponsiveSettingsControl>
+      </ResponsiveSettingsRow>
 
       <MfaSetupModal
         opened={setupModalOpen}

apps/client/src/ee/security/components/sso-provider-list.tsx

@@ -69,7 +69,7 @@ export default function SsoProviderList() {
   return (
     <>
       <Card shadow="sm" radius="sm">
-        <Table.ScrollContainer minWidth={500}>
+        <Table.ScrollContainer minWidth={600}>
           <Table verticalSpacing="sm">
             <Table.Thead>
               <Table.Tr>
@@ -104,7 +104,7 @@ export default function SsoProviderList() {
                       </Group>
                     </Table.Td>
                     <Table.Td>
-                      <Badge color={"gray"} variant="light">
+                      <Badge color={"gray"} variant="light" style={{ whiteSpace: "nowrap" }}>
                         {provider.type.toUpperCase()}
                       </Badge>
                     </Table.Td>
@@ -133,6 +133,7 @@ export default function SsoProviderList() {
                       )}
                     </Table.Td>
                     <Table.Td>
+                      <Group gap="xs" wrap="nowrap">
                       <ActionIcon
                         variant="subtle"
                         color="gray"
@@ -168,6 +169,7 @@ export default function SsoProviderList() {
                           </Menu.Item>
                         </Menu.Dropdown>
                       </Menu>
+                      </Group>
                     </Table.Td>
                   </Table.Tr>
                 ))}

apps/client/src/features/user/components/page-state-pref.tsx

@@ -1,25 +1,28 @@
-import { Group, Text, MantineSize, SegmentedControl } from "@mantine/core";
+import { Text, MantineSize, SegmentedControl } from "@mantine/core";
 import { useAtom } from "jotai";
 import { userAtom } from "@/features/user/atoms/current-user-atom.ts";
 import { updateUser } from "@/features/user/services/user-service.ts";
 import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { PageEditMode } from "@/features/user/types/user.types.ts";
+import { ResponsiveSettingsRow, ResponsiveSettingsContent, ResponsiveSettingsControl } from "@/components/ui/responsive-settings-row";
 
 export default function PageStatePref() {
   const { t } = useTranslation();
 
   return (
-    <Group justify="space-between" wrap="nowrap" gap="xl">
+    <ResponsiveSettingsRow>
-      <div>
+      <ResponsiveSettingsContent>
         <Text size="md">{t("Default page edit mode")}</Text>
         <Text size="sm" c="dimmed">
           {t("Choose your preferred page edit mode. Avoid accidental edits.")}
         </Text>
-      </div>
+      </ResponsiveSettingsContent>
 
+      <ResponsiveSettingsControl>
         <PageStateSegmentedControl />
-    </Group>
+      </ResponsiveSettingsControl>
+    </ResponsiveSettingsRow>
   );
 }
 

apps/client/src/features/user/components/page-width-pref.tsx

@@ -1,24 +1,27 @@
 import { userAtom } from "@/features/user/atoms/current-user-atom.ts";
 import { updateUser } from "@/features/user/services/user-service.ts";
-import { Group, MantineSize, Switch, Text } from "@mantine/core";
+import { MantineSize, Switch, Text } from "@mantine/core";
 import { useAtom } from "jotai/index";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { ResponsiveSettingsRow, ResponsiveSettingsContent, ResponsiveSettingsControl } from "@/components/ui/responsive-settings-row";
 
 export default function PageWidthPref() {
   const { t } = useTranslation();
 
   return (
-    <Group justify="space-between" wrap="nowrap" gap="xl">
+    <ResponsiveSettingsRow>
-      <div>
+      <ResponsiveSettingsContent>
         <Text size="md">{t("Full page width")}</Text>
         <Text size="sm" c="dimmed">
           {t("Choose your preferred page width.")}
         </Text>
-      </div>
+      </ResponsiveSettingsContent>
 
+      <ResponsiveSettingsControl>
         <PageWidthToggle />
-    </Group>
+      </ResponsiveSettingsControl>
+    </ResponsiveSettingsRow>
   );
 }
 

apps/client/src/features/workspace/components/members/components/workspace-invites-table.tsx

@@ -26,7 +26,7 @@ export default function WorkspaceInvitesTable() {
         )}
       </Alert>
 
-      <Table.ScrollContainer minWidth={500}>
+      <Table.ScrollContainer minWidth={600}>
         <Table highlightOnHover verticalSpacing="sm">
           <Table.Thead>
             <Table.Tr>

apps/client/src/features/workspace/components/members/components/workspace-members-table.tsx

@@ -4,7 +4,7 @@ import {
   useWorkspaceMembersQuery,
 } from "@/features/workspace/queries/workspace-query.ts";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
-import React, { useCallback, useRef, useState } from "react";
+import React from "react";
 import RoleSelectMenu from "@/components/ui/role-select-menu.tsx";
 import {
   getUserRoleLabel,
@@ -54,7 +54,7 @@ export default function WorkspaceMembersTable() {
   return (
     <>
       <SearchInput onSearch={handleSearch} />
-      <Table.ScrollContainer minWidth={500}>
+      <Table.ScrollContainer minWidth={600}>
         <Table highlightOnHover verticalSpacing="sm">
           <Table.Thead>
             <Table.Tr>