diff --git a/web/apps/photos/src/components/Sidebar/MapSettings.tsx b/web/apps/photos/src/components/Sidebar/MapSettings.tsx
index f858525700..1c1c99d5d0 100644
--- a/web/apps/photos/src/components/Sidebar/MapSettings.tsx
+++ b/web/apps/photos/src/components/Sidebar/MapSettings.tsx
@@ -1,3 +1,4 @@
+import { InlineErrorIndicator } from "@/base/components/ErrorIndicator";
 import { MenuItemGroup } from "@/base/components/Menu";
 import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
 import { LoadingButton } from "@/base/components/mui/LoadingButton";
@@ -176,11 +177,7 @@ const ConfirmEnableMap: React.FC<ConfirmStepProps> = ({
                 </Typography>
             </Box>
             <Stack px={"8px"} spacing={"8px"}>
-                {phase == "failed" && (
-                    <Typography variant="small" color="critical.main">
-                        {t("generic_error")}
-                    </Typography>
-                )}
+                {phase == "failed" && <InlineErrorIndicator />}
                 <LoadingButton
                     loading={phase == "loading"}
                     color={"accent"}
@@ -220,11 +217,7 @@ const ConfirmDisableMap: React.FC<ConfirmStepProps> = ({
                 </Typography>
             </Box>
             <Stack px={"8px"} spacing={"8px"}>
-                {phase == "failed" && (
-                    <Typography variant="small" color="critical.main">
-                        {t("generic_error")}
-                    </Typography>
-                )}
+                {phase == "failed" && <InlineErrorIndicator />}
                 <LoadingButton
                     loading={phase == "loading"}
                     color={"critical"}
diff --git a/web/packages/base/components/ErrorIndicator.tsx b/web/packages/base/components/ErrorIndicator.tsx
index dfed07b059..fb2afe7087 100644
--- a/web/packages/base/components/ErrorIndicator.tsx
+++ b/web/packages/base/components/ErrorIndicator.tsx
@@ -32,8 +32,8 @@ export const ActivityErrorIndicator: React.FC<React.PropsWithChildren> = ({
 export const InlineErrorIndicator: React.FC<React.PropsWithChildren> = ({
     children,
 }) => (
-    <Box sx={{ display: "flex", gap: 2, alignItems: "center" }}>
-        <ErrorOutline color="secondary" sx={{ color: "critical" }} />
+    <Box sx={{ display: "flex", gap: "5px", alignItems: "center" }}>
+        <ErrorOutline sx={{ fontSize: "16px", color: "critical.main" }} />
         <Typography variant="small" color="critical.main">
             {children ?? t("generic_error")}
         </Typography>
diff --git a/web/packages/base/components/MiniDialog.tsx b/web/packages/base/components/MiniDialog.tsx
index a0ba423e47..e8986cae09 100644
--- a/web/packages/base/components/MiniDialog.tsx
+++ b/web/packages/base/components/MiniDialog.tsx
@@ -13,6 +13,7 @@ import {
 import { t } from "i18next";
 import React, { useState } from "react";
 import log from "../log";
+import { InlineErrorIndicator } from "./ErrorIndicator";
 
 /**
  * Customize the contents of an {@link AttributedMiniDialog}.
@@ -161,12 +162,6 @@ export const AttributedMiniDialog: React.FC<
 
     const { PaperProps, ...rest } = props;
 
-    const errorIndicator = phase == "failed" && (
-        <Typography variant="small" color="critical.main">
-            {t("generic_error")}
-        </Typography>
-    );
-
     const loadingButton = attributes.continue && (
         <LoadingButton
             loading={phase == "loading"}
@@ -250,7 +245,7 @@ export const AttributedMiniDialog: React.FC<
                     sx={{ paddingBlockStart: "24px", gap: "8px" }}
                     direction={attributes.buttonDirection ?? "column"}
                 >
-                    {errorIndicator}
+                    {phase == "failed" && <InlineErrorIndicator />}
                     {attributes.buttonDirection == "row" ? (
                         <>
                             {cancelButton}