From 5734ec07b7b7edcd4a0f68828fcc2d01a712e9b7 Mon Sep 17 00:00:00 2001
From: Jeremy Weinstein <jeremydw@gmail.com>
Date: Tue, 17 Feb 2026 17:13:51 -0800
Subject: [PATCH] chore: enhance VersionHistoryModal popover styles and
 integrate publishing lock label function

---
 .../ui/components/DocEditor/DocEditor.tsx     |  9 +++++----
 .../DocStatusBadges/DocStatusBadges.tsx       | 20 +++++++++++++++----
 .../VersionHistoryModal.css                   | 19 ++++++++++++++++++
 .../VersionHistoryModal.tsx                   |  5 +++++
 4 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/packages/root-cms/ui/components/DocEditor/DocEditor.tsx b/packages/root-cms/ui/components/DocEditor/DocEditor.tsx
index fe01b178..92771bf3 100644
--- a/packages/root-cms/ui/components/DocEditor/DocEditor.tsx
+++ b/packages/root-cms/ui/components/DocEditor/DocEditor.tsx
@@ -91,7 +91,10 @@ import {
   DocActionEvent,
   DocActionsMenu,
 } from '../DocActionsMenu/DocActionsMenu.js';
-import {DocStatusBadges} from '../DocStatusBadges/DocStatusBadges.js';
+import {
+  DocStatusBadges,
+  getPublishingLockedLabel,
+} from '../DocStatusBadges/DocStatusBadges.js';
 import {useEditJsonModal} from '../EditJsonModal/EditJsonModal.js';
 import {useEditTranslationsModal} from '../EditTranslationsModal/EditTranslationsModal.js';
 import {useLocalizationModal} from '../LocalizationModal/LocalizationModal.js';
@@ -268,9 +271,7 @@ DocEditor.StatusBar = (props: StatusBarProps) => {
           </Tooltip>
         ) : testPublishingLocked(data as CMSDoc) ? (
           <Tooltip
-            label={`Locked by ${data.sys!.publishingLocked.lockedBy}: "${
-              data.sys!.publishingLocked.reason
-            }"`}
+            label={getPublishingLockedLabel(data as CMSDoc)}
             transition="pop"
           >
             <Button
diff --git a/packages/root-cms/ui/components/DocStatusBadges/DocStatusBadges.tsx b/packages/root-cms/ui/components/DocStatusBadges/DocStatusBadges.tsx
index 36bafa07..8ea83a13 100644
--- a/packages/root-cms/ui/components/DocStatusBadges/DocStatusBadges.tsx
+++ b/packages/root-cms/ui/components/DocStatusBadges/DocStatusBadges.tsx
@@ -66,10 +66,7 @@ export function DocStatusBadges(props: DocStatusBadgesProps) {
         </Tooltip>
       )}
       {testPublishingLocked(doc) && (
-        <Tooltip
-          {...tooltipProps}
-          label={`Locked by ${doc.sys.publishingLocked.lockedBy}: "${doc.sys.publishingLocked.reason}"`}
-        >
+        <Tooltip {...tooltipProps} label={getPublishingLockedLabel(doc)}>
           <Badge
             size="xs"
             variant="gradient"
@@ -83,6 +80,21 @@ export function DocStatusBadges(props: DocStatusBadgesProps) {
   );
 }
 
+/**
+ * Returns a human-readable label for the publishing lock tooltip.
+ */
+export function getPublishingLockedLabel(docData: CMSDoc): string {
+  const lock = docData.sys?.publishingLocked;
+  if (!lock) {
+    return '';
+  }
+  if (lock.until) {
+    const formatted = formatDateTime(lock.until);
+    return `Locked until ${formatted} by ${lock.lockedBy}: "${lock.reason}"`;
+  }
+  return `Locked by ${lock.lockedBy}: "${lock.reason}"`;
+}
+
 function timeDiff(ts: Timestamp | null) {
   // Since we're using server timestamps, firestore doesn't always return the
   // timestamp right away since the db save is happening asynchronously. In
diff --git a/packages/root-cms/ui/components/VersionHistoryModal/VersionHistoryModal.css b/packages/root-cms/ui/components/VersionHistoryModal/VersionHistoryModal.css
index 6a5922cd..dfb77965 100644
--- a/packages/root-cms/ui/components/VersionHistoryModal/VersionHistoryModal.css
+++ b/packages/root-cms/ui/components/VersionHistoryModal/VersionHistoryModal.css
@@ -56,6 +56,25 @@
   line-height: 1.5;
 }
 
+.VersionHistoryModal__popover__body {
+  background-color: #1a1b1e;
+  color: #fff;
+  border: 1px solid #2c2e33;
+}
+
+.VersionHistoryModal__popover__arrow {
+  background-color: #1a1b1e;
+  border: 1px solid #2c2e33;
+}
+
+.VersionHistoryModal__popover__close {
+  color: #909296;
+}
+
+.VersionHistoryModal__popover__close:hover {
+  color: #fff;
+}
+
 .VersionHistoryModal__messageIcon {
   vertical-align: middle;
 }
diff --git a/packages/root-cms/ui/components/VersionHistoryModal/VersionHistoryModal.tsx b/packages/root-cms/ui/components/VersionHistoryModal/VersionHistoryModal.tsx
index 1bb73f97..2d4984e4 100644
--- a/packages/root-cms/ui/components/VersionHistoryModal/VersionHistoryModal.tsx
+++ b/packages/root-cms/ui/components/VersionHistoryModal/VersionHistoryModal.tsx
@@ -280,6 +280,11 @@ export function VersionHistoryModal(
                           withArrow
                           shadow="md"
                           width={320}
+                          classNames={{
+                            body: 'VersionHistoryModal__popover__body',
+                            arrow: 'VersionHistoryModal__popover__arrow',
+                            close: 'VersionHistoryModal__popover__close',
+                          }}
                           target={
                             <ActionIcon
                               size="xs"