chore: enhance VersionHistoryModal popover styles

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

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

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;
 }

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"