From 6229d2e8c8d0aaa56793b6ea1f0590ba3584fe38 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Fri, 20 Jun 2025 17:35:03 +1000
Subject: [PATCH] Small UI improvement to SecurityContext (#9818)

* Small UI improvement to SecurityContext

* Fix translated string
---
 .../AccountSettings/SecurityContent.tsx       | 48 +++++++++++--------
 .../src/tables/plugin/PluginListTable.tsx     |  2 +-
 2 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx b/src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx
index f03a181215..0506bffd15 100644
--- a/src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx
+++ b/src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx
@@ -133,13 +133,15 @@ function EmailSection() {
   return (
     <SimpleGrid cols={{ xs: 1, md: 2 }} spacing='sm'>
       {emailAvailable ? (
-        <Alert
-          icon={<IconAlertCircle size='1rem' />}
-          title={t`Not Configured`}
-          color='yellow'
-        >
-          <Trans>Currently no email addresses are registered.</Trans>
-        </Alert>
+        <Stack gap='xs'>
+          <Alert
+            icon={<IconAlertCircle size='1rem' />}
+            title={t`Not Configured`}
+            color='yellow'
+          >
+            <Trans>Currently no email addresses are registered.</Trans>
+          </Alert>
+        </Stack>
       ) : (
         <Radio.Group
           value={selectedEmail}
@@ -289,13 +291,15 @@ function ProviderSection({
     <Grid>
       <Grid.Col span={6}>
         {data.length == 0 ? (
-          <Alert
-            icon={<IconAlertCircle size='1rem' />}
-            title={t`Not Configured`}
-            color='yellow'
-          >
-            <Trans>There are no providers connected to this account.</Trans>
-          </Alert>
+          <Stack gap='xs'>
+            <Alert
+              icon={<IconAlertCircle size='1rem' />}
+              title={t`Not Configured`}
+              color='yellow'
+            >
+              <Trans>There are no providers connected to this account.</Trans>
+            </Alert>
+          </Stack>
         ) : (
           <Stack>
             <Radio.Group
@@ -426,13 +430,15 @@ function MfaSection() {
       <ReauthModal />
       <SimpleGrid cols={{ xs: 1, md: 2 }} spacing='sm'>
         {data.length == 0 ? (
-          <Alert
-            title={t`Not Configured`}
-            icon={<IconAlertCircle size='1rem' />}
-            color='yellow'
-          >
-            <Trans>No multi-factor tokens configured for this account</Trans>
-          </Alert>
+          <Stack gap='xs'>
+            <Alert
+              title={t`Not Configured`}
+              icon={<IconAlertCircle size='1rem' />}
+              color='yellow'
+            >
+              <Trans>No multi-factor tokens configured for this account</Trans>
+            </Alert>
+          </Stack>
         ) : (
           <Table stickyHeader striped highlightOnHover withTableBorder>
             <Table.Thead>
diff --git a/src/frontend/src/tables/plugin/PluginListTable.tsx b/src/frontend/src/tables/plugin/PluginListTable.tsx
index 841b635c87..e44990a4fd 100644
--- a/src/frontend/src/tables/plugin/PluginListTable.tsx
+++ b/src/frontend/src/tables/plugin/PluginListTable.tsx
@@ -278,7 +278,7 @@ export default function PluginListTable() {
   });
 
   const installPluginModal = useCreateApiFormModal({
-    title: t`Install plugin`,
+    title: t`Install Plugin`,
     url: ApiEndpoints.plugin_install,
     timeout: 30000,
     fields: {