update args

src/frontend/src/components/buttons/ActionButton.tsx

@@ -41,7 +41,7 @@ export function ActionButton(props: ActionButtonProps) {
           onClick={props.onClick ?? notYetImplemented}
           variant={props.variant ?? 'light'}
         >
-          <Group spacing="xs" noWrap={true}>
+          <Group gap="xs" wrap="nowrap">
             {props.icon}
           </Group>
         </ActionIcon>

src/frontend/src/components/buttons/SplitButton.tsx

@@ -55,7 +55,7 @@ export function SplitButton({
   const theme = useMantineTheme();
 
   return (
-    <Group noWrap style={{ gap: 0 }}>
+    <Group wrap="nowrap" style={{ gap: 0 }}>
       <Button
         onClick={currentOption?.onClick}
         disabled={loading ? false : currentOption?.disabled}

src/frontend/src/components/details/Details.tsx

@@ -399,7 +399,7 @@ export function DetailsTable({
 }) {
   return (
     <Paper p="xs" withBorder radius="xs">
-      <Stack spacing="xs">
+      <Stack gap="xs">
         {title && <StylishText size="lg">{title}</StylishText>}
         <Table striped>
           <tbody>

src/frontend/src/components/details/DetailsImage.tsx

@@ -174,7 +174,7 @@ function UploadModal({
       >
         <Group
           position="center"
-          spacing="xl"
+          gap="xl"
           style={{ minHeight: rem(140), pointerEvents: 'none' }}
         >
           <Dropzone.Accept>
@@ -252,7 +252,7 @@ function ImageActionButtons({
     <>
       {visible && (
         <Group
-          spacing="xs"
+          gap="xs"
           style={{ zIndex: 2, position: 'absolute', top: '10px', left: '10px' }}
         >
           {actions.selectExisting && (

src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx

@@ -246,7 +246,7 @@ export function TemplateEditor(props: TemplateEditorProps) {
               </Tabs.Tab>
             ))}
 
-            <Group position="right" style={{ flex: '1' }} noWrap>
+            <Group justify="right" style={{ flex: '1' }} wrap="nowrap">
               <SplitButton
                 loading={isPreviewLoading}
                 defaultSelected="preview_save"

src/frontend/src/components/forms/ApiForm.tsx

@@ -422,11 +422,11 @@ export function ApiForm({
       <Paper mah={'65vh'} style={{ overflowY: 'auto' }}>
         <div>
           {/* Form Fields */}
-          <Stack spacing="sm">
+          <Stack gap="sm">
             {(!isValid || nonFieldErrors.length > 0) && (
               <Alert radius="sm" color="red" title={t`Form Errors Exist`}>
                 {nonFieldErrors.length > 0 && (
-                  <Stack spacing="xs">
+                  <Stack gap="xs">
                     {nonFieldErrors.map((message) => (
                       <Text key={message}>{message}</Text>
                     ))}
@@ -446,7 +446,7 @@ export function ApiForm({
               </Alert>
             )}
             <FormProvider {...form}>
-              <Stack spacing="xs">
+              <Stack gap="xs">
                 {!optionsLoading &&
                   Object.entries(props.fields ?? {}).map(
                     ([fieldName, field]) => (
@@ -468,7 +468,7 @@ export function ApiForm({
       {/* Footer with Action Buttons */}
       <Divider />
       <div>
-        <Group position="right">
+        <Group justify="right">
           {props.actions?.map((action, i) => (
             <Button
               key={i}

src/frontend/src/components/forms/AuthenticationForm.tsx

@@ -104,7 +104,7 @@ export function AuthenticationForm() {
       ) : null}
       <form onSubmit={classicForm.onSubmit(() => {})}>
         {classicLoginMode ? (
-          <Stack spacing={0}>
+          <Stack gap={0}>
             <TextInput
               required
               label={t`Username`}
@@ -118,7 +118,7 @@ export function AuthenticationForm() {
               {...classicForm.getInputProps('password')}
             />
             {auth_settings?.password_forgotten_enabled === true && (
-              <Group position="apart" mt="0">
+              <Group justify="apart" mt="0">
                 <Anchor
                   component="button"
                   type="button"
@@ -143,7 +143,7 @@ export function AuthenticationForm() {
           </Stack>
         )}
 
-        <Group position="apart" mt="xl">
+        <Group justify="apart" mt="xl">
           <Anchor
             component="button"
             type="button"
@@ -228,7 +228,7 @@ export function RegistrationForm() {
     <>
       {auth_settings?.registration_enabled && (
         <form onSubmit={registrationForm.onSubmit(() => {})}>
-          <Stack spacing={0}>
+          <Stack gap={0}>
             <TextInput
               required
               label={t`Username`}
@@ -256,7 +256,7 @@ export function RegistrationForm() {
             />
           </Stack>
 
-          <Group position="apart" mt="xl">
+          <Group justify="apart" mt="xl">
             <Button
               type="submit"
               disabled={isRegistering}

src/frontend/src/components/forms/fields/NestedObjectField.tsx

@@ -20,7 +20,7 @@ export function NestedObjectField({
         </Accordion.Control>
         <Accordion.Panel>
           <Divider sx={{ marginTop: '-10px', marginBottom: '10px' }} />
-          <Stack spacing="xs">
+          <Stack gap="xs">
             {Object.entries(definition.children ?? {}).map(
               ([childFieldName, field]) => (
                 <ApiFormField

src/frontend/src/components/images/Thumbnail.tsx

@@ -25,7 +25,7 @@ export function Thumbnail({
   const backup_image = '/static/img/blank_image.png';
 
   return (
-    <Group align={align ?? 'left'} spacing="xs" noWrap={true}>
+    <Group align={align ?? 'left'} gap="xs" wrap="nowrap">
       <ApiImage
         src={src || backup_image}
         alt={alt}
@@ -59,7 +59,7 @@ export function ThumbnailHoverCard({
 }) {
   const card = useMemo(() => {
     return (
-      <Group position="left" spacing={10} noWrap={true}>
+      <Group justify="left" gap={10} wrap="nowrap">
         <Thumbnail src={src} alt={alt} size={size} />
         <Text>{text}</Text>
       </Group>

src/frontend/src/components/items/AttachmentLink.tsx

@@ -59,7 +59,7 @@ export function AttachmentLink({
   let text = external ? attachment : attachment.split('/').pop();
 
   return (
-    <Group position="left" spacing="sm">
+    <Group justify="left" gap="sm">
       {external ? <IconLink /> : attachmentIcon(attachment)}
       <Anchor href={attachment} target="_blank" rel="noopener noreferrer">
         {text}

src/frontend/src/components/items/ColorToggle.tsx

@@ -5,7 +5,7 @@ export function ColorToggle() {
   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
 
   return (
-    <Group position="center">
+    <Group justify="center">
       <ActionIcon
         onClick={() => toggleColorScheme()}
         size="lg"

src/frontend/src/components/items/DashboardItem.tsx

@@ -19,13 +19,13 @@ export function StatisticItem({
   return (
     <Paper withBorder p="xs" key={id} pos="relative">
       <LoadingOverlay visible={isLoading} overlayBlur={2} />
-      <Group position="apart">
+      <Group justify="apart">
         <Text size="xs" color="dimmed" className={classes.dashboardItemTitle}>
           {data.title}
         </Text>
       </Group>
 
-      <Group align="flex-end" spacing="xs" mt={25}>
+      <Group align="flex-end" gap="xs" mt={25}>
         <Text className={classes.dashboardItemValue}>{data.value}</Text>
       </Group>
     </Paper>

src/frontend/src/components/items/InfoItem.tsx

@@ -43,7 +43,7 @@ export function InfoItem({
   }
 
   return (
-    <Group position="apart">
+    <Group justify="apart">
       <Text fz="sm" fw={700}>
         {name}:
       </Text>

src/frontend/src/components/items/ProgressBar.tsx

@@ -22,7 +22,7 @@ export function ProgressBar(props: ProgressBarProps) {
   }, [props]);
 
   return (
-    <Stack spacing={2} style={{ flexGrow: 1, minWidth: '100px' }}>
+    <Stack gap={2} style={{ flexGrow: 1, minWidth: '100px' }}>
       {props.progressLabel && (
         <Text align="center" size="xs">
           {props.value} / {props.maximum}

src/frontend/src/components/modals/AboutInvenTreeModal.tsx

@@ -59,7 +59,7 @@ export function AboutInvenTreeModal({
       <tr key={idx}>
         <td>{map.title}</td>
         <td>
-          <Group position="apart" spacing="xs">
+          <Group justify="apart" gap="xs">
             {alwaysLink ? (
               <Anchor href={data[map.ref]} target="_blank">
                 {data[map.ref]}
@@ -177,7 +177,7 @@ export function AboutInvenTreeModal({
         </tbody>
       </Table>
       <Divider />
-      <Group position="apart">
+      <Group justify="apart">
         <CopyButton
           value={copyval}
           label={<Trans>Copy version information</Trans>}

src/frontend/src/components/modals/LicenseModal.tsx

@@ -18,14 +18,14 @@ import { apiUrl } from '../../states/ApiState';
 
 export function LicenceView(entries: Readonly<any[]>) {
   return (
-    <Stack spacing="xs">
+    <Stack gap="xs">
       <Divider />
       {entries?.length > 0 ? (
         <Accordion variant="contained" defaultValue="-">
           {entries?.map((entry: any, index: number) => (
             <Accordion.Item key={entry.name} value={`entry-${index}`}>
               <Accordion.Control>
-                <Group position="apart" grow>
+                <Group justify="apart" grow>
                   <Text>{entry.name}</Text>
                   <Text>{entry.license}</Text>
                   <Space />
@@ -60,7 +60,7 @@ export function LicenseModal() {
   const rspdata = !data ? [] : Object.keys(data ?? {});
 
   return (
-    <Stack spacing="xs">
+    <Stack gap="xs">
       <Divider />
       <LoadingOverlay visible={isFetching} />
       {isFetching && (

src/frontend/src/components/modals/ServerInfoModal.tsx

@@ -137,7 +137,7 @@ export function ServerInfoModal({
         </tbody>
       </Table>
       <Divider />
-      <Group position="right">
+      <Group justify="right">
         <Button
           color="red"
           onClick={() => {

src/frontend/src/components/nav/BreadcrumbList.tsx

@@ -42,7 +42,7 @@ export function BreadcrumbList({
 
   return (
     <Paper p="3" radius="xs">
-      <Group spacing="xs">
+      <Group gap="xs">
         {navCallback && (
           <ActionIcon key="nav-action" onClick={navCallback}>
             <IconMenu2 />

src/frontend/src/components/nav/DetailDrawer.tsx

@@ -79,7 +79,7 @@ function DetailDrawerComponent({
         </Group>
       }
     >
-      <Stack spacing={'xs'} className={classes.flex}>
+      <Stack gap={'xs'} className={classes.flex}>
         <Divider />
         {content}
       </Stack>

src/frontend/src/components/nav/Header.tsx

@@ -88,7 +88,7 @@ export function Header() {
         }}
       />
       <Container className={classes.layoutHeaderSection} size="100%">
-        <Group position="apart">
+        <Group justify="apart">
           <Group>
             <NavHoverMenu openDrawer={openNavDrawer} />
             <NavTabs />

src/frontend/src/components/nav/MainMenu.tsx

@@ -22,7 +22,7 @@ export function MainMenu() {
     <Menu width={260} position="bottom-end">
       <Menu.Target>
         <UnstyledButton className={classes.layoutHeaderUser}>
-          <Group spacing={7}>
+          <Group gap={7}>
             <Text weight={500} size="sm" sx={{ lineHeight: 1 }} mr={3}>
               {userState.username() ? (
                 userState.username()

src/frontend/src/components/nav/NavHoverMenu.tsx

@@ -56,7 +56,7 @@ export function NavHoverMenu({
       </HoverCard.Target>
 
       <HoverCard.Dropdown sx={{ overflow: 'hidden' }}>
-        <Group position="apart" px="md">
+        <Group justify="apart" px="md">
           <ActionIcon
             onClick={openDrawer}
             onMouseOver={openDrawer}
@@ -64,7 +64,7 @@ export function NavHoverMenu({
           >
             <IconLayoutSidebar />
           </ActionIcon>
-          <Group spacing={'xs'}>
+          <Group gap={'xs'}>
             {instanceName ? (
               instanceName
             ) : (
@@ -89,7 +89,7 @@ export function NavHoverMenu({
         />
         <MenuLinks links={onlyItems} highlighted={true} />
         <div className={classes.headerDropdownFooter}>
-          <Group position="apart">
+          <Group justify="apart">
             <div>
               <Text fw={500} fz="sm">
                 <Trans>Get started</Trans>

src/frontend/src/components/nav/NotificationDrawer.tsx

@@ -66,7 +66,7 @@ export function NotificationDrawer({
         }
       }}
       title={
-        <Group position="apart" noWrap={true}>
+        <Group justify="apart" wrap="nowrap">
           <StylishText size="lg">{t`Notifications`}</StylishText>
           <ActionIcon
             onClick={() => {
@@ -79,7 +79,7 @@ export function NotificationDrawer({
         </Group>
       }
     >
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <Divider />
         <LoadingOverlay visible={notificationQuery.isFetching} />
         {(notificationQuery.data?.results?.length ?? 0) == 0 && (
@@ -88,8 +88,8 @@ export function NotificationDrawer({
           </Alert>
         )}
         {notificationQuery.data?.results?.map((notification: any) => (
-          <Group position="apart" key={notification.pk}>
+          <Group justify="apart" key={notification.pk}>
-            <Stack spacing="3">
+            <Stack gap="3">
               {notification?.target?.link ? (
                 <Text
                   size="sm"

src/frontend/src/components/nav/PageDetail.tsx

@@ -32,7 +32,7 @@ export function PageDetail({
   actions?: ReactNode[];
 }) {
   return (
-    <Stack spacing="xs">
+    <Stack gap="xs">
       {breadcrumbs && breadcrumbs.length > 0 && (
         <Paper p="xs" radius="xs" shadow="xs">
           <BreadcrumbList
@@ -42,13 +42,13 @@ export function PageDetail({
         </Paper>
       )}
       <Paper p="xs" radius="xs" shadow="xs">
-        <Stack spacing="xs">
+        <Stack gap="xs">
-          <Group position="apart" noWrap={true}>
+          <Group justify="apart" wrap="nowrap">
-            <Group position="left" noWrap={true}>
+            <Group justify="left" wrap="nowrap">
               {imageUrl && (
                 <ApiImage src={imageUrl} radius="sm" height={64} width={64} />
               )}
-              <Stack spacing="xs">
+              <Stack gap="xs">
                 {title && <StylishText size="lg">{title}</StylishText>}
                 {subtitle && (
                   <Text size="md" truncate>
@@ -59,12 +59,12 @@ export function PageDetail({
             </Group>
             <Space />
             {detail}
-            <Group position="right" spacing="xs" noWrap>
+            <Group justify="right" gap="xs" wrap="nowrap">
               {badges}
             </Group>
             <Space />
             {actions && (
-              <Group spacing={5} position="right">
+              <Group gap={5} justify="right">
                 {actions.map((action, idx) => (
                   <Fragment key={idx}>{action}</Fragment>
                 ))}

src/frontend/src/components/nav/PanelGroup.tsx

@@ -161,7 +161,7 @@ function BasePanelGroup({
                   width: '100%'
                 }}
               >
-                <Stack spacing="md">
+                <Stack gap="md">
                   {panel.showHeadline !== false && (
                     <>
                       <StylishText size="xl">{panel.label}</StylishText>

src/frontend/src/components/nav/PartCategoryTree.tsx

@@ -61,7 +61,7 @@ export function PartCategoryTree({
       <Group
         position="apart"
         key={node.id}
-        noWrap={true}
+        wrap="nowrap"
         onClick={() => {
           onClose();
           navigate(`/part/category/${node.id}`);
@@ -148,13 +148,13 @@ export function PartCategoryTree({
         }
       }}
       title={
-        <Group position="left" p="ms" spacing="md" noWrap={true}>
+        <Group justify="left" p="ms" gap="md" wrap="nowrap">
           <IconSitemap />
           <StylishText size="lg">{t`Part Categories`}</StylishText>
         </Group>
       }
     >
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <LoadingOverlay visible={treeQuery.isFetching} />
         <ReactTree
           nodes={treeQuery.data ?? []}

src/frontend/src/components/nav/SearchDrawer.tsx

@@ -68,8 +68,8 @@ function QueryResultGroup({
   return (
     <Paper shadow="sm" radius="xs" p="md" key={`paper-${query.model}`}>
       <Stack key={`stack-${query.model}`}>
-        <Group position="apart" noWrap={true}>
+        <Group justify="apart" wrap="nowrap">
-          <Group position="left" spacing={5} noWrap={true}>
+          <Group justify="left" gap={5} wrap="nowrap">
             <Text size="lg">{model.label_multiple}</Text>
             <Text size="sm" italic>
               {' '}
@@ -331,7 +331,7 @@ export function SearchDrawer({
       withCloseButton={false}
       styles={{ header: { width: '100%' }, title: { width: '100%' } }}
       title={
-        <Group position="apart" spacing={1} noWrap={true}>
+        <Group justify="apart" gap={1} wrap="nowrap">
           <TextInput
             placeholder={t`Enter search text`}
             radius="xs"
@@ -392,7 +392,7 @@ export function SearchDrawer({
         </Center>
       )}
       {!searchQuery.isFetching && !searchQuery.isError && (
-        <Stack spacing="md">
+        <Stack gap="md">
           {queryResults.map((query, idx) => (
             <QueryResultGroup
               key={idx}

src/frontend/src/components/nav/SettingsHeader.tsx

@@ -22,7 +22,7 @@ export function SettingsHeader({
   switch_link?: string;
 }) {
   return (
-    <Stack spacing="0" ml={'sm'}>
+    <Stack gap="0" ml={'sm'}>
       <Group>
         <Title order={3}>{title}</Title>
         {shorthand && <Text c="dimmed">({shorthand})</Text>}

src/frontend/src/components/nav/StockLocationTree.tsx

@@ -53,7 +53,7 @@ export function StockLocationTree({
       <Group
         position="apart"
         key={node.id}
-        noWrap={true}
+        wrap="nowrap"
         onClick={() => {
           onClose();
           navigate(`/stock/location/${node.id}`);
@@ -88,13 +88,13 @@ export function StockLocationTree({
         }
       }}
       title={
-        <Group position="left" noWrap={true} spacing="md" p="md">
+        <Group justify="left" wrap="nowrap" gap="md" p="md">
           <IconSitemap />
           <StylishText size="lg">{t`Stock Locations`}</StylishText>
         </Group>
       }
     >
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <LoadingOverlay visible={treeQuery.isFetching} />
         <ReactTree
           nodes={treeQuery.data ?? []}

src/frontend/src/components/render/Instance.tsx

@@ -113,8 +113,8 @@ export function RenderInlineModel({
   // TODO: Handle URL
 
   return (
-    <Group spacing="xs" position="apart" noWrap={true}>
+    <Group gap="xs" justify="apart" wrap="nowrap">
-      <Group spacing="xs" position="left" noWrap={true}>
+      <Group gap="xs" justify="left" wrap="nowrap">
         {image && Thumbnail({ src: image, size: 18 })}
         <Text size="sm">{primary}</Text>
         {secondary && <Text size="xs">{secondary}</Text>}

src/frontend/src/components/settings/SettingItem.tsx

@@ -137,7 +137,7 @@ function SettingValue({
       );
     default:
       return valueText ? (
-        <Group spacing="xs" position="right">
+        <Group gap="xs" justify="right">
           <Space />
           <Button variant="subtle" onClick={onEditButton}>
             {valueText}
@@ -177,8 +177,8 @@ export function SettingItem({
 
   return (
     <Paper style={style}>
-      <Group position="apart" p="3">
+      <Group justify="apart" p="3">
-        <Stack spacing="2" p="4px">
+        <Stack gap="2" p="4px">
           <Text>
             {setting.name}
             {setting.required ? ' *' : ''}

src/frontend/src/components/settings/SettingList.tsx

@@ -35,7 +35,7 @@ export function SettingList({
 
   return (
     <>
-      <Stack spacing="xs">
+      <Stack gap="xs">
         {(keys || allKeys).map((key, i) => {
           const setting = settingsState?.settings?.find(
             (s: any) => s.key === key

src/frontend/src/components/widgets/WidgetLayout.tsx

@@ -134,7 +134,7 @@ function WidgetControlBar({
   useHotkeys([['mod+E', () => editFnc()]]);
 
   return (
-    <Group position="right">
+    <Group justify="right">
       <Menu
         shadow="md"
         width={200}

src/frontend/src/functions/forms.tsx

@@ -244,7 +244,7 @@ export function openModalApiForm(props: OpenApiFormProps) {
           props.onClose ? props.onClose() : null;
         },
         children: (
-          <Stack spacing={'xs'}>
+          <Stack gap={'xs'}>
             <Divider />
             <ApiForm id={modalId} props={props} optionsLoading={false} />
           </Stack>

src/frontend/src/hooks/UseForm.tsx

@@ -62,7 +62,7 @@ export function useApiFormModal(props: ApiFormModalProps) {
     closeOnClickOutside: formProps.closeOnClickOutside,
     size: props.size ?? 'xl',
     children: (
-      <Stack spacing={'xs'}>
+      <Stack gap={'xs'}>
         <Divider />
         <OptionsApiForm props={formProps} id={id} />
       </Stack>

src/frontend/src/pages/Auth/Logged-In.tsx

@@ -22,7 +22,7 @@ export default function Logged_In() {
               <Text size="lg">
                 <Trans>Checking if you are already logged in</Trans>
               </Text>
-              <Group position="center">
+              <Group justify="center">
                 <Loader />
               </Group>
             </Stack>

src/frontend/src/pages/Index/Scan.tsx

@@ -240,14 +240,14 @@ export default function Scan() {
 
     if (uniqueObjectTypes.length === 0) {
       return (
-        <Group spacing={0}>
+        <Group gap={0}>
           <IconQuestionMark color="orange" />
           <Trans>Selected elements are not known</Trans>
         </Group>
       );
     } else if (uniqueObjectTypes.length > 1) {
       return (
-        <Group spacing={0}>
+        <Group gap={0}>
           <IconAlertCircle color="orange" />
           <Trans>Multiple object types selected</Trans>
         </Group>
@@ -270,8 +270,8 @@ export default function Scan() {
   // rendering
   return (
     <>
-      <Group position="apart">
+      <Group justify="apart">
-        <Group position="left">
+        <Group justify="left">
           <StylishText>
             <Trans>Scan Page</Trans>
           </StylishText>
@@ -287,8 +287,8 @@ export default function Scan() {
       <Grid maw={'100%'}>
         <Col span={4}>
           <Stack>
-            <Stack spacing="xs">
+            <Stack gap="xs">
-              <Group position="apart">
+              <Group justify="apart">
                 <TitleWithDoc
                   order={3}
                   text={t`Select the input method you want to use to scan items.`}
@@ -306,7 +306,7 @@ export default function Scan() {
               </Group>
               {inp}
             </Stack>
-            <Stack spacing={0}>
+            <Stack gap={0}>
               <TitleWithDoc
                 order={3}
                 text={t`Depending on the selected parts actions will be shown here. Not all barcode types are supported currently.`}
@@ -355,7 +355,7 @@ export default function Scan() {
           </Stack>
         </Col>
         <Col span={8}>
-          <Group position="apart">
+          <Group justify="apart">
             <TitleWithDoc
               order={3}
               text={t`History is locally kept in this browser.`}
@@ -696,8 +696,8 @@ function InputImageBarcode({ action }: inputProps) {
   }, [cameraValue]);
 
   return (
-    <Stack spacing="xs">
+    <Stack gap="xs">
-      <Group spacing="xs">
+      <Group gap="xs">
         <Select
           value={cameraValue}
           onChange={setCameraValue}

src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx

@@ -35,7 +35,7 @@ export function AccountDetailPanel() {
       </Group>
       <Group>
         {editing ? (
-          <Stack spacing="xs">
+          <Stack gap="xs">
             <TextInput
               label="first name"
               placeholder={t`First name`}
@@ -46,14 +46,14 @@ export function AccountDetailPanel() {
               placeholder={t`Last name`}
               {...form.getInputProps('last_name')}
             />
-            <Group position="right" mt="md">
+            <Group justify="right" mt="md">
               <Button type="submit">
                 <Trans>Submit</Trans>
               </Button>
             </Group>
           </Stack>
         ) : (
-          <Stack spacing="0">
+          <Stack gap="0">
             <Text>
               <Trans>First name: </Trans>
               {form.values.first_name}

src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx

@@ -137,7 +137,7 @@ function EmailContent({}: {}) {
                 key={link.id}
                 value={String(link.id)}
                 label={
-                  <Group position="apart">
+                  <Group justify="apart">
                     {link.email}
                     {link.primary && (
                       <Badge color="blue">
@@ -251,7 +251,7 @@ function SsoContent({ dataProvider }: { dataProvider: any | undefined }) {
         variant="outline"
         disabled={!provider.configured}
       >
-        <Group position="apart">
+        <Group justify="apart">
           {provider.display_name}
           {provider.configured == false && <IconAlertCircle />}
         </Group>
@@ -308,7 +308,7 @@ function SsoContent({ dataProvider }: { dataProvider: any | undefined }) {
             {currentProviders === undefined ? (
               <Trans>Loading</Trans>
             ) : (
-              <Stack spacing="xs">
+              <Stack gap="xs">
                 {currentProviders.map((provider: any) => (
                   <ProviderButton key={provider.id} provider={provider} />
                 ))}

src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx

@@ -97,7 +97,7 @@ export default function AdminCenter() {
         label: t`Project Codes`,
         icon: <IconListDetails />,
         content: (
-          <Stack spacing="xs">
+          <Stack gap="xs">
             <GlobalSettingList keys={['PROJECT_CODES_ENABLED']} />
             <Divider />
             <ProjectCodeTable />
@@ -144,7 +144,7 @@ export default function AdminCenter() {
   }, []);
 
   const QuickAction = () => (
-    <Stack spacing={'xs'} ml={'sm'}>
+    <Stack gap={'xs'} ml={'sm'}>
       <Title order={5}>
         <Trans>Quick Actions</Trans>
       </Title>
@@ -167,7 +167,7 @@ export default function AdminCenter() {
   );
 
   return (
-    <Stack spacing="xs">
+    <Stack gap="xs">
       <SettingsHeader
         title={t`Admin Center`}
         subtitle={t`Advanced Options`}

src/frontend/src/pages/Index/Settings/AdminCenter/MachineManagementPanel.tsx

@@ -38,7 +38,7 @@ export default function MachineManagementPanel() {
 
       <Space h="10px" />
 
-      <Stack spacing={'xs'}>
+      <Stack gap={'xs'}>
         <Title order={5}>
           <Trans>Machine types</Trans>
         </Title>
@@ -47,7 +47,7 @@ export default function MachineManagementPanel() {
 
       <Space h="10px" />
 
-      <Stack spacing={'xs'}>
+      <Stack gap={'xs'}>
         <Group>
           <Title order={5}>
             <Trans>Machine Error Stack</Trans>

src/frontend/src/pages/Index/Settings/AdminCenter/UserManagementPanel.tsx

@@ -8,7 +8,7 @@ import { UserTable } from '../../../../tables/settings/UserTable';
 
 export default function UserManagementPanel() {
   return (
-    <Stack spacing="xs">
+    <Stack gap="xs">
       <Title order={5}>
         <Trans>Users</Trans>
       </Title>
@@ -21,7 +21,7 @@ export default function UserManagementPanel() {
 
       <Divider />
 
-      <Stack spacing={0}>
+      <Stack gap={0}>
         <Text>
           <Trans>Settings</Trans>
         </Text>

src/frontend/src/pages/Index/Settings/SystemSettings.tsx

@@ -288,7 +288,7 @@ export default function SystemSettings() {
 
   return (
     <>
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <SettingsHeader
           title={t`System Settings`}
           subtitle={server.instance || ''}

src/frontend/src/pages/Index/Settings/UserSettings.tsx

@@ -110,7 +110,7 @@ export default function UserSettings() {
 
   return (
     <>
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <SettingsHeader
           title={t`Account Settings`}
           subtitle={`${user?.first_name} ${user?.last_name}`}

src/frontend/src/pages/build/BuildDetail.tsx

@@ -349,7 +349,7 @@ export default function BuildDetail() {
   return (
     <>
       {editBuild.modal}
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <LoadingOverlay visible={instanceQuery.isFetching} />
         <PageDetail
           title={build.reference}

src/frontend/src/pages/company/CompanyDetail.tsx

@@ -296,7 +296,7 @@ export default function CompanyDetail(props: CompanyDetailProps) {
   return (
     <>
       {editCompany.modal}
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <LoadingOverlay visible={instanceQuery.isFetching} />
         <PageDetail
           title={t`Company` + `: ${company.name}`}

src/frontend/src/pages/company/ManufacturerPartDetail.tsx

@@ -227,7 +227,7 @@ export default function ManufacturerPartDetail() {
   return (
     <>
       {editManufacturerPart.modal}
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <LoadingOverlay visible={instanceQuery.isFetching} />
         <PageDetail
           title={t`ManufacturerPart`}

src/frontend/src/pages/company/SupplierPartDetail.tsx

@@ -272,7 +272,7 @@ export default function SupplierPartDetail() {
   return (
     <>
       {editSuppliertPart.modal}
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <LoadingOverlay visible={instanceQuery.isFetching} />
         <PageDetail
           title={t`Supplier Part`}

src/frontend/src/pages/part/CategoryDetail.tsx

@@ -222,7 +222,7 @@ export default function CategoryDetail({}: {}) {
   return (
     <>
       {editCategory.modal}
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <LoadingOverlay visible={instanceQuery.isFetching} />
         <PartCategoryTree
           opened={treeOpen}

src/frontend/src/pages/part/PartDetail.tsx

@@ -452,7 +452,7 @@ export default function PartDetail() {
             />
           </Grid.Col>
           <Grid.Col span={8}>
-            <Stack spacing="xs">
+            <Stack gap="xs">
               <table>
                 <PartIcons part={part} />
               </table>
@@ -752,7 +752,7 @@ export default function PartDetail() {
   return (
     <>
       {editPart.modal}
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <LoadingOverlay visible={instanceQuery.isFetching} />
         <PartCategoryTree
           opened={treeOpen}

src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx

@@ -313,7 +313,7 @@ export default function PurchaseOrderDetail() {
   return (
     <>
       {editPurchaseOrder.modal}
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <LoadingOverlay visible={instanceQuery.isFetching} />
         <PageDetail
           title={t`Purchase Order` + `: ${order.reference}`}

src/frontend/src/pages/sales/ReturnOrderDetail.tsx

@@ -235,7 +235,7 @@ export default function ReturnOrderDetail() {
 
   return (
     <>
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <LoadingOverlay visible={instanceQuery.isFetching} />
         <PageDetail
           title={t`Return Order` + `: ${order.reference}`}

src/frontend/src/pages/sales/SalesOrderDetail.tsx

@@ -259,7 +259,7 @@ export default function SalesOrderDetail() {
 
   return (
     <>
-      <Stack spacing="xs">
+      <Stack gap="xs">
         <LoadingOverlay visible={instanceQuery.isFetching} />
         <PageDetail
           title={t`Sales Order` + `: ${order.reference}`}

src/frontend/src/tables/FilterSelectDrawer.tsx

@@ -41,12 +41,12 @@ function FilterItem({
 
   return (
     <Paper p="sm" shadow="sm" radius="xs">
-      <Group position="apart" key={flt.name}>
+      <Group justify="apart" key={flt.name}>
-        <Stack spacing="xs">
+        <Stack gap="xs">
           <Text size="sm">{flt.label}</Text>
           <Text size="xs">{flt.description}</Text>
         </Stack>
-        <Group position="right">
+        <Group justify="right">
           <Badge>{flt.displayValue ?? flt.value}</Badge>
           <Tooltip label={t`Remove filter`} withinPortal={true}>
             <CloseButton size="md" color="red" onClick={removeFilter} />
@@ -138,7 +138,7 @@ function FilterAddGroup({
   );
 
   return (
-    <Stack spacing="xs">
+    <Stack gap="xs">
       <Divider />
       <Select
         data={filterOptions}
@@ -195,14 +195,14 @@ export function FilterSelectDrawer({
       onClose={onClose}
       title={<StylishText size="lg">{t`Table Filters`}</StylishText>}
     >
-      <Stack spacing="xs">
+      <Stack gap="xs">
         {hasFilters &&
           tableState.activeFilters?.map((f) => (
             <FilterItem key={f.name} flt={f} tableState={tableState} />
           ))}
         {hasFilters && <Divider />}
         {addFilter && (
-          <Stack spacing="xs">
+          <Stack gap="xs">
             <FilterAddGroup
               tableState={tableState}
               availableFilters={availableFilters}

src/frontend/src/tables/InvenTreeTable.tsx

@@ -548,9 +548,9 @@ export function InvenTreeTable<T = any>({
           onClose={() => setFiltersVisible(false)}
         />
       )}
-      <Stack spacing="sm">
+      <Stack gap="sm">
-        <Group position="apart">
+        <Group justify="apart">
-          <Group position="left" key="custom-actions" spacing={5}>
+          <Group justify="left" key="custom-actions" gap={5}>
             {tableProps.tableActions?.map((group, idx) => (
               <Fragment key={idx}>{group}</Fragment>
             ))}
@@ -583,7 +583,7 @@ export function InvenTreeTable<T = any>({
             )}
           </Group>
           <Space />
-          <Group position="right" spacing={5}>
+          <Group justify="right" gap={5}>
             {tableProps.enableSearch && (
               <TableSearchInput
                 searchCallback={(term: string) =>

src/frontend/src/tables/TableHoverCard.tsx

@@ -29,14 +29,14 @@ export function TableHoverCard({
   return (
     <HoverCard withinPortal={true}>
       <HoverCard.Target>
-        <Group spacing="xs" position="apart" noWrap={true}>
+        <Group gap="xs" justify="apart" wrap="nowrap">
           {value}
           <IconInfoCircle size="16" color="blue" />
         </Group>
       </HoverCard.Target>
       <HoverCard.Dropdown>
-        <Stack spacing="xs">
+        <Stack gap="xs">
-          <Group spacing="xs" position="left">
+          <Group gap="xs" justify="left">
             <IconInfoCircle size="16" color="blue" />
             <Text weight="bold">{title}</Text>
           </Group>

src/frontend/src/tables/bom/BomTable.tsx

@@ -149,7 +149,7 @@ export function BomTable({
 
           let text =
             available_stock <= 0 ? (
-              <Text color="red" italic>{t`No stock`}</Text>
+              <Text c="red" italic>{t`No stock`}</Text>
             ) : (
               available_stock
             );

src/frontend/src/tables/build/BuildLineTable.tsx

@@ -142,7 +142,7 @@ export default function BuildLineTable({ params = {} }: { params?: any }) {
         ordering: 'unit_quantity',
         render: (record: any) => {
           return (
-            <Group position="apart">
+            <Group justify="apart">
               <Text>{record.bom_item_detail?.quantity}</Text>
               {record?.part_detail?.units && (
                 <Text size="xs">[{record.part_detail.units}]</Text>
@@ -156,7 +156,7 @@ export default function BuildLineTable({ params = {} }: { params?: any }) {
         sortable: true,
         render: (record: any) => {
           return (
-            <Group position="apart">
+            <Group justify="apart">
               <Text>{record.quantity}</Text>
               {record?.part_detail?.units && (
                 <Text size="xs">[{record.part_detail.units}]</Text>

src/frontend/src/tables/company/CompanyTable.tsx

@@ -39,7 +39,7 @@ export function CompanyTable({
         sortable: true,
         render: (record: any) => {
           return (
-            <Group spacing="xs" noWrap={true}>
+            <Group gap="xs" wrap="nowrap">
               <Thumbnail
                 src={record.thumbnail ?? record.image ?? ''}
                 alt={record.name}

src/frontend/src/tables/general/AttachmentTable.tsx

@@ -54,7 +54,7 @@ function attachmentTableColumns(): TableColumn[] {
 
       render: function (record: any) {
         return (
-          <Group position="apart">
+          <Group justify="apart">
             <Text>{record.upload_date}</Text>
             {record.user_detail && (
               <Badge size="xs">{record.user_detail.username}</Badge>
@@ -227,7 +227,7 @@ export function AttachmentTable({
   }, [allowEdit]);
 
   return (
-    <Stack spacing="xs">
+    <Stack gap="xs">
       {pk && pk > 0 && (
         <InvenTreeTable
           key="attachment-table"
@@ -248,7 +248,7 @@ export function AttachmentTable({
       {allowEdit && validPk && (
         <Dropzone onDrop={uploadFiles} key="attachment-dropzone">
           <Dropzone.Idle>
-            <Group position="center">
+            <Group justify="center">
               <IconFileUpload size={24} />
               <Text size="sm">{t`Upload attachment`}</Text>
             </Group>

src/frontend/src/tables/machine/MachineListTable.tsx

@@ -206,8 +206,8 @@ function MachineDrawer({
   );
 
   return (
-    <Stack spacing="xs">
+    <Stack gap="xs">
-      <Group position="apart">
+      <Group justify="apart">
         <Box></Box>
 
         <Group>
@@ -277,8 +277,8 @@ function MachineDrawer({
       </Group>
 
       <Card withBorder>
-        <Stack spacing="md">
+        <Stack gap="md">
-          <Group position="apart">
+          <Group justify="apart">
             <Title order={4}>
               <Trans>Machine information</Trans>
             </Title>
@@ -286,10 +286,10 @@ function MachineDrawer({
               <IconRefresh />
             </ActionIcon>
           </Group>
-          <Stack pos="relative" spacing="xs">
+          <Stack pos="relative" gap="xs">
             <LoadingOverlay visible={isFetching} overlayOpacity={0} />
             <InfoItem name={t`Machine Type`}>
-              <Group spacing="xs">
+              <Group gap="xs">
                 {machineType ? (
                   <DetailDrawerLink
                     to={`../type-${machine?.machine_type}`}
@@ -302,7 +302,7 @@ function MachineDrawer({
               </Group>
             </InfoItem>
             <InfoItem name={t`Machine Driver`}>
-              <Group spacing="xs">
+              <Group gap="xs">
                 {machineDriver ? (
                   <DetailDrawerLink
                     to={`../driver-${machine?.driver}`}
@@ -333,7 +333,7 @@ function MachineDrawer({
                 <Text fz="sm">{machine?.status_text}</Text>
               </Flex>
             </InfoItem>
-            <Group position="apart" spacing="xs">
+            <Group justify="apart" gap="xs">
               <Text fz="sm" fw={700}>
                 <Trans>Errors</Trans>:
               </Text>
@@ -412,7 +412,7 @@ export function MachineListTable({
         sortable: true,
         render: function (record) {
           return (
-            <Group position="left" noWrap>
+            <Group justify="left" wrap="nowrap">
               <MachineStatusIndicator machine={record} />
               <Text>{record.name}</Text>
               {record.restart_required && (
@@ -432,7 +432,7 @@ export function MachineListTable({
             (m) => m.slug === record.machine_type
           );
           return (
-            <Group spacing="xs">
+            <Group gap="xs">
               <Text>
                 {machineType ? machineType.name : record.machine_type}
               </Text>
@@ -447,7 +447,7 @@ export function MachineListTable({
         render: (record) => {
           const driver = machineDrivers?.find((d) => d.slug === record.driver);
           return (
-            <Group spacing="xs">
+            <Group gap="xs">
               <Text>{driver ? driver.name : record.driver}</Text>
               {!record.is_driver_available && <UnavailableIndicator />}
             </Group>

src/frontend/src/tables/machine/MachineTypeTable.tsx

@@ -78,7 +78,7 @@ function MachineTypeDrawer({ machineTypeSlug }: { machineTypeSlug: string }) {
 
   return (
     <Stack>
-      <Group position="center">
+      <Group justify="center">
         <Title order={4}>
           {machineType ? machineType.name : machineTypeSlug}
         </Title>
@@ -91,8 +91,8 @@ function MachineTypeDrawer({ machineTypeSlug }: { machineTypeSlug: string }) {
       )}
 
       <Card withBorder>
-        <Stack spacing="md">
+        <Stack gap="md">
-          <Group position="apart">
+          <Group justify="apart">
             <Title order={4}>
               <Trans>Machine type information</Trans>
             </Title>
@@ -101,7 +101,7 @@ function MachineTypeDrawer({ machineTypeSlug }: { machineTypeSlug: string }) {
             </ActionIcon>
           </Group>
 
-          <Stack pos="relative" spacing="xs">
+          <Stack pos="relative" gap="xs">
             <LoadingOverlay visible={isFetching} overlayOpacity={0} />
             <InfoItem name={t`Name`} value={machineType?.name} type="text" />
             <InfoItem name={t`Slug`} value={machineType?.slug} type="text" />
@@ -138,7 +138,7 @@ function MachineTypeDrawer({ machineTypeSlug }: { machineTypeSlug: string }) {
       </Card>
 
       <Card withBorder>
-        <Stack spacing="md">
+        <Stack gap="md">
           <Title order={4}>
             <Trans>Available drivers</Trans>
           </Title>
@@ -182,7 +182,7 @@ function MachineDriverDrawer({
 
   return (
     <Stack>
-      <Group position="center">
+      <Group justify="center">
         <Title order={4}>
           {machineDriver ? machineDriver.name : machineDriverSlug}
         </Title>
@@ -195,8 +195,8 @@ function MachineDriverDrawer({
       )}
 
       <Card withBorder>
-        <Stack spacing="md">
+        <Stack gap="md">
-          <Group position="apart">
+          <Group justify="apart">
             <Title order={4}>
               <Trans>Machine driver information</Trans>
             </Title>
@@ -205,7 +205,7 @@ function MachineDriverDrawer({
             </ActionIcon>
           </Group>
 
-          <Stack pos="relative" spacing="xs">
+          <Stack pos="relative" gap="xs">
             <LoadingOverlay visible={isFetching} overlayOpacity={0} />
             <InfoItem name={t`Name`} value={machineDriver?.name} type="text" />
             <InfoItem name={t`Slug`} value={machineDriver?.slug} type="text" />
@@ -250,7 +250,7 @@ function MachineDriverDrawer({
               value={machineDriver?.is_builtin}
               type="boolean"
             />
-            <Group position="apart" spacing="xs">
+            <Group justify="apart" gap="xs">
               <Text fz="sm" fw={700}>
                 <Trans>Errors</Trans>:
               </Text>
@@ -276,7 +276,7 @@ function MachineDriverDrawer({
       </Card>
 
       <Card withBorder>
-        <Stack spacing="md">
+        <Stack gap="md">
           <Title order={4}>
             <Trans>Machines</Trans>
           </Title>

src/frontend/src/tables/part/ParametricPartTable.tsx

@@ -67,7 +67,7 @@ function ParameterCell({
 
   return (
     <div>
-      <Group grow ref={ref} position="apart">
+      <Group grow ref={ref} justify="apart">
         <Group grow style={{ flex: 1 }}>
           <TableHoverCard
             value={value ?? '-'}

src/frontend/src/tables/part/PartCategoryTemplateTable.tsx

@@ -94,7 +94,7 @@ export default function PartCategoryTemplateTable({}: {}) {
           }
 
           return (
-            <Group position="apart" grow>
+            <Group justify="apart" grow>
               <Text>{record.default_value}</Text>
               {units && <Text size="xs">{units}</Text>}
             </Group>

src/frontend/src/tables/part/PartTable.tsx

@@ -140,7 +140,7 @@ function partTableColumns(): TableColumn[] {
         return (
           <TableHoverCard
             value={
-              <Group spacing="xs" position="left" noWrap>
+              <Group gap="xs" justify="left" wrap="nowrap">
                 <Text color={color}>{text}</Text>
                 {record.units && (
                   <Text size="xs" color={color}>

src/frontend/src/tables/part/PartTestTemplateTable.tsx

@@ -38,7 +38,7 @@ export default function PartTestTemplateTable({ partId }: { partId: number }) {
           return (
             <Text
               weight={record.required && 700}
-              color={record.enabled ? undefined : 'red'}
+              c={record.enabled ? undefined : 'red'}
             >
               {record.test_name}
             </Text>

src/frontend/src/tables/part/PartThumbTable.tsx

@@ -185,7 +185,7 @@ export function PartThumbTable({
 
       <Divider />
       <Paper p="sm">
-        <Group position="apart">
+        <Group justify="apart">
           <TextInput
             placeholder={t`Search...`}
             onChange={(event) => {

src/frontend/src/tables/part/RelatedPartTable.tsx

@@ -47,8 +47,8 @@ export function RelatedPartTable({ partId }: { partId: number }): ReactNode {
           let part = getPart(record);
           return (
             <Group
-              noWrap={true}
+              wrap="nowrap"
-              position="left"
+              justify="left"
               onClick={() => {
                 navigate(`/part/${part.pk}/`);
               }}

src/frontend/src/tables/plugin/PluginListTable.tsx

@@ -119,11 +119,11 @@ export function PluginDrawer({
   }
 
   return (
-    <Stack spacing={'xs'}>
+    <Stack gap={'xs'}>
-      <Group position="apart">
+      <Group justify="apart">
         <Box></Box>
 
-        <Group spacing={'xs'}>
+        <Group gap={'xs'}>
           {plugin && PluginIcon(plugin)}
           <Title order={4}>
             {plugin?.meta?.human_name ?? plugin?.name ?? '-'}
@@ -161,11 +161,11 @@ export function PluginDrawer({
       <LoadingOverlay visible={isFetching} overlayOpacity={0} />
 
       <Card withBorder>
-        <Stack spacing="md">
+        <Stack gap="md">
           <Title order={4}>
             <Trans>Plugin information</Trans>
           </Title>
-          <Stack pos="relative" spacing="xs">
+          <Stack pos="relative" gap="xs">
             <InfoItem type="text" name={t`Name`} value={plugin?.name} />
             <InfoItem
               type="text"
@@ -193,11 +193,11 @@ export function PluginDrawer({
       </Card>
 
       <Card withBorder>
-        <Stack spacing="md">
+        <Stack gap="md">
           <Title order={4}>
             <Trans>Package information</Trans>
           </Title>
-          <Stack pos="relative" spacing="xs">
+          <Stack pos="relative" gap="xs">
             {plugin?.is_package && (
               <InfoItem
                 type="text"
@@ -226,7 +226,7 @@ export function PluginDrawer({
 
       {plugin && plugin.active && (
         <Card withBorder>
-          <Stack spacing="md">
+          <Stack gap="md">
             <Title order={4}>
               <Trans>Plugin settings</Trans>
             </Title>
@@ -290,7 +290,7 @@ export default function PluginListTable() {
           // TODO: Add link to plugin detail page
           // TODO: Add custom badges
           return (
-            <Group position="left">
+            <Group justify="left">
               <PluginIcon {...record} />
               <Text>{record.name}</Text>
             </Group>
@@ -344,7 +344,7 @@ export default function PluginListTable() {
                 : t`Confirm plugin deactivation`
             }
           >
-            <Stack spacing="xs">
+            <Stack gap="xs">
               <Text>
                 {active
                   ? t`The following plugin will be activated`
@@ -532,7 +532,7 @@ export default function PluginListTable() {
         icon={<IconInfoCircle />}
         title={t`Confirm plugin uninstall`}
       >
-        <Stack spacing="xs">
+        <Stack gap="xs">
           <Text>{t`The selected plugin will be uninstalled.`}</Text>
           <Text>{t`This action cannot be undone.`}</Text>
         </Stack>

src/frontend/src/tables/settings/ScheduledTasksTable.tsx

@@ -31,7 +31,7 @@ export default function ScheduledTasksTable() {
           }
 
           return (
-            <Group position="apart">
+            <Group justify="apart">
               <Text>{record.last_run}</Text>
               {record.success ? (
                 <IconCircleCheck color="green" />

src/frontend/src/tables/settings/TemplateTable.tsx

@@ -130,11 +130,11 @@ export function TemplateDrawer({
   }
 
   return (
-    <Stack spacing="xs" style={{ display: 'flex', flex: '1' }}>
+    <Stack gap="xs" style={{ display: 'flex', flex: '1' }}>
       {editTemplate.modal}
       {deleteTemplate.modal}
 
-      <Group position="apart">
+      <Group justify="apart">
         <Box></Box>
 
         <Group>

src/frontend/src/tables/stock/StockItemTable.tsx

@@ -178,7 +178,7 @@ function stockItemTableColumns(): TableColumn[] {
         return (
           <TableHoverCard
             value={
-              <Group spacing="xs" position="left" noWrap={true}>
+              <Group gap="xs" justify="left" wrap="nowrap">
                 <Text color={color}>{text}</Text>
                 {part.units && (
                   <Text size="xs" color={color}>

src/frontend/src/tables/stock/StockItemTestResultTable.tsx

@@ -132,7 +132,7 @@ export default function StockItemTestResultTable({
             record.stock_item != undefined && record.stock_item != itemId;
 
           return (
-            <Group position="apart">
+            <Group justify="apart">
               <Text
                 italic={installed}
                 fw={required && 700}
@@ -141,7 +141,7 @@ export default function StockItemTestResultTable({
                 {!record.templateId && '- '}
                 {record.test_name ?? record.template_detail?.test_name}
               </Text>
-              <Group position="right">
+              <Group justify="right">
                 {record.results && record.results.length > 1 && (
                   <Tooltip label={t`Test Results`}>
                     <Badge color="lightblue" variant="filled">
@@ -194,7 +194,7 @@ export default function StockItemTestResultTable({
         title: t`Date`,
         render: (record: any) => {
           return (
-            <Group position="apart">
+            <Group justify="apart">
               {renderDate(record.date)}
               {record.user_detail && (
                 <RenderUser instance={record.user_detail} />
@@ -214,7 +214,7 @@ export default function StockItemTestResultTable({
         title: t`Started`,
         render: (record: any) => {
           return (
-            <Group position="apart">
+            <Group justify="apart">
               {renderDate(record.started_datetime, {
                 showTime: true,
                 showSeconds: true
@@ -229,7 +229,7 @@ export default function StockItemTestResultTable({
         title: t`Finished`,
         render: (record: any) => {
           return (
-            <Group position="apart">
+            <Group justify="apart">
               {renderDate(record.finished_datetime, {
                 showTime: true,
                 showSeconds: true

src/frontend/src/views/MobileAppView.tsx

@@ -18,7 +18,7 @@ export default function MobileAppView() {
       <Center h="100vh">
         <Container>
           <Stack>
-            <Title color="red">
+            <Title c="red">
               <Trans>Mobile viewport detected</Trans>
             </Title>
             <Text>