make placeholders smaller

apps/client/public/locales/en-US/translation.json

@@ -903,7 +903,6 @@
   "Token": "Token",
   "Synced block": "Synced block",
   "Create a block that stays in sync across pages.": "Create a block that stays in sync across pages.",
-  "Synced block name": "Synced block name",
   "Editing original": "Editing original",
   "Copy synced block": "Copy synced block",
   "Unsync": "Unsync",
@@ -912,5 +911,8 @@
   "Synced to {{count}} other page_other": "Synced to {{count}} other pages",
   "ORIGINAL": "ORIGINAL",
   "THIS PAGE": "THIS PAGE",
-  "No pages": "No pages"
+  "No pages": "No pages",
+  "The original synced block no longer exists": "The original synced block no longer exists",
+  "You don't have access to this synced block": "You don't have access to this synced block",
+  "Failed to load this synced block": "Failed to load this synced block"
 }

apps/client/src/features/editor/components/transclusion/error-placeholder.tsx

@@ -7,16 +7,11 @@ export default function ErrorPlaceholder() {
   return (
     <div className={classes.placeholder}>
       <IconAlertTriangle
-        size={20}
+        size={18}
-        stroke={1.5}
+        stroke={1.6}
         className={classes.placeholderIcon}
       />
-      <div className={classes.placeholderTitle}>
+      <span>{t("Failed to load this synced block")}</span>
-        {t("Failed to load transclusion")}
-      </div>
-      <div className={classes.placeholderSubtext}>
-        {t("An error occurred while rendering this reference")}
-      </div>
     </div>
   );
 }

apps/client/src/features/editor/components/transclusion/no-access-placeholder.tsx

@@ -6,11 +6,8 @@ export default function NoAccessPlaceholder() {
   const { t } = useTranslation();
   return (
     <div className={classes.placeholder}>
-      <IconEyeOff size={20} stroke={1.5} className={classes.placeholderIcon} />
+      <IconEyeOff size={18} stroke={1.6} className={classes.placeholderIcon} />
-      <div className={classes.placeholderTitle}>{t("No access")}</div>
+      <span>{t("You don't have access to this synced block")}</span>
-      <div className={classes.placeholderSubtext}>
-        {t("You don't have access to this content")}
-      </div>
     </div>
   );
 }

apps/client/src/features/editor/components/transclusion/not-found-placeholder.tsx

@@ -1,4 +1,4 @@
-import { IconQuestionMark } from "@tabler/icons-react";
+import { IconInfoCircle } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import classes from "./transclusion.module.css";
 
@@ -6,17 +6,12 @@ export default function NotFoundPlaceholder() {
   const { t } = useTranslation();
   return (
     <div className={classes.placeholder}>
-      <IconQuestionMark
+      <IconInfoCircle
-        size={20}
+        size={18}
-        stroke={1.5}
+        stroke={1.6}
         className={classes.placeholderIcon}
       />
-      <div className={classes.placeholderTitle}>
+      <span>{t("The original synced block no longer exists")}</span>
-        {t("Synced block not found")}
-      </div>
-      <div className={classes.placeholderSubtext}>
-        {t("The source page or synced block no longer exists")}
-      </div>
     </div>
   );
 }

apps/client/src/features/editor/components/transclusion/transclusion.module.css

@@ -1,34 +1,22 @@
 .placeholder {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
-  justify-content: center;
+  gap: 8px;
-  gap: 4px;
+  padding: 8px 12px;
-  padding: var(--mantine-spacing-md);
   border-radius: var(--mantine-radius-md);
   background: light-dark(
     var(--mantine-color-gray-0),
     var(--mantine-color-dark-6)
   );
-  border: 1px dashed
-    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
   color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  font-size: var(--mantine-font-size-sm);
   user-select: none;
 }
 
 .placeholderIcon {
-  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  flex: none;
-}
-
-.placeholderTitle {
-  font-weight: 600;
-  font-size: var(--mantine-font-size-sm);
-}
-
-.placeholderSubtext {
-  font-size: var(--mantine-font-size-xs);
   color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
-  text-align: center;
 }
 
 .transclusionBadge {