From 4387f3ced76d79641aaf9794e61af48245781ac0 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom@getoutline.com>
Date: Wed, 6 May 2026 20:48:13 -0400
Subject: [PATCH] fix: Resolve console warnings for rtl DOM attribute and
 untracked MobX read (#12284)

- Use transient `$rtl` prop on Meta styled component so it isn't forwarded to the DOM
- Wrap ActionButton in observer so action visibility checks read MobX computed values inside a reactive context

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
---
 app/components/ActionButton.tsx                   | 3 ++-
 app/scenes/Document/components/DocumentMeta.tsx   | 7 ++++---
 app/scenes/Document/components/RevisionViewer.tsx | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/components/ActionButton.tsx b/app/components/ActionButton.tsx
index 16bc3c33f5..1fbed3eee3 100644
--- a/app/components/ActionButton.tsx
+++ b/app/components/ActionButton.tsx
@@ -1,4 +1,5 @@
 /* oxlint-disable react/prop-types */
+import { observer } from "mobx-react";
 import * as React from "react";
 import type { Props as TooltipProps } from "~/components/Tooltip";
 import Tooltip from "~/components/Tooltip";
@@ -85,4 +86,4 @@ const ActionButton = React.forwardRef<HTMLButtonElement, Props>(
   }
 );
 
-export default ActionButton;
+export default observer(ActionButton);
diff --git a/app/scenes/Document/components/DocumentMeta.tsx b/app/scenes/Document/components/DocumentMeta.tsx
index 04431c1d50..f499069de9 100644
--- a/app/scenes/Document/components/DocumentMeta.tsx
+++ b/app/scenes/Document/components/DocumentMeta.tsx
@@ -28,7 +28,7 @@ type Props = {
   rtl?: boolean;
 };
 
-function TitleDocumentMeta({ to, document, revision, ...rest }: Props) {
+function TitleDocumentMeta({ to, document, revision, rtl, ...rest }: Props) {
   const { views, comments, ui } = useStores();
   const { t } = useTranslation();
   const sidebarContext = useLocationSidebarContext();
@@ -50,6 +50,7 @@ function TitleDocumentMeta({ to, document, revision, ...rest }: Props) {
       revision={revision}
       to={to}
       replace
+      $rtl={rtl}
       {...rest}
     >
       {commentingEnabled && can.comment && (
@@ -113,8 +114,8 @@ const InsightsButton = styled(NudeButton)`
   }
 `;
 
-export const Meta = styled(DocumentMeta)<{ rtl?: boolean }>`
-  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
+export const Meta = styled(DocumentMeta)<{ $rtl?: boolean }>`
+  justify-content: ${(props) => (props.$rtl ? "flex-end" : "flex-start")};
   margin: -12px 0 2em 0;
   font-size: 14px;
   position: relative;
diff --git a/app/scenes/Document/components/RevisionViewer.tsx b/app/scenes/Document/components/RevisionViewer.tsx
index 31e7b81fc3..e93f0f5ca4 100644
--- a/app/scenes/Document/components/RevisionViewer.tsx
+++ b/app/scenes/Document/components/RevisionViewer.tsx
@@ -92,7 +92,7 @@ function RevisionViewer(props: Props, ref: React.Ref<TEditor>) {
         document={document}
         revision={revision}
         to={documentPath(document)}
-        rtl={revision.rtl}
+        $rtl={revision.rtl}
       />
       <Editor
         key={compareToRevisionId}