From edd58b9b82741d2cb868398c9eaafbb3c59efafa Mon Sep 17 00:00:00 2001
From: Maksym Ionutsa <123338468+peekknuf@users.noreply.github.com>
Date: Thu, 29 Jan 2026 22:28:38 +0100
Subject: [PATCH] fix: match scheduled backups timestamp styling in R2NP tab
 (#42132)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Align Restore to New Project timestamps with Scheduled Backups by
showing UTC, full date format, and consistent monospace styling

## What is the current behavior?

Restore to New Project shows local time instead of UTC by default +
style

## What is the new behavior?

Unified the style, R2NP timestamp follows the Scheduled backup tab

## Additional context

<details>
  <summary>
before and after (dont judge my cropping skills)
  </summary>

  <br />

<img
src="https://github.com/user-attachments/assets/3a43e970-79f1-4382-a61f-b36f5f8fe6d1"
alt="CleanShot 2026-01-24 at 23 11 19">
</details>



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Style**
* Improved timestamp presentation in backup and restore screens:
consistent UTC display, clearer label format (DD MMM YYYY HH:mm:ss
(ZZ)), tighter monospace styling, and better alignment for enhanced
readability and visual consistency.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../Database/Backups/RestoreToNewProject/BackupsList.tsx  | 7 ++++++-
 .../Database/RestoreToNewProject/PreviousRestoreItem.tsx  | 8 ++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/BackupsList.tsx b/apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/BackupsList.tsx
index c7868594841..07265a6e2b5 100644
--- a/apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/BackupsList.tsx
+++ b/apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/BackupsList.tsx
@@ -35,7 +35,12 @@ export const BackupsList = ({ onSelectRestore, disabled }: BackupsListProps) =>
               return (
                 <div className="grid grid-cols-4 gap-4 items-center p-4" key={backup.id}>
                   <div>
-                    <TimestampInfo utcTimestamp={backup.inserted_at} />
+                    <TimestampInfo
+                      displayAs="utc"
+                      utcTimestamp={backup.inserted_at}
+                      labelFormat="DD MMM YYYY HH:mm:ss (ZZ)"
+                      className="text-left !text-sm font-mono tracking-tight"
+                    />
                   </div>
                   <div>
                     <Badge>{JSON.stringify(backup.status).replaceAll('"', '')}</Badge>
diff --git a/apps/studio/components/interfaces/Database/RestoreToNewProject/PreviousRestoreItem.tsx b/apps/studio/components/interfaces/Database/RestoreToNewProject/PreviousRestoreItem.tsx
index ab65a4768f9..dcd1092da3d 100644
--- a/apps/studio/components/interfaces/Database/RestoreToNewProject/PreviousRestoreItem.tsx
+++ b/apps/studio/components/interfaces/Database/RestoreToNewProject/PreviousRestoreItem.tsx
@@ -15,8 +15,10 @@ export const PreviousRestoreItem = ({ clone }: { clone: CloneStatus['clones'][nu
         </div>
         <div>
           <TimestampInfo
-            className="font-mono text-xs text-foreground-lighter"
+            className="text-left !text-sm font-mono tracking-tight text-foreground-lighter"
+            displayAs="utc"
             utcTimestamp={clone.inserted_at ?? ''}
+            labelFormat="DD MMM YYYY HH:mm:ss (ZZ)"
           />
         </div>
       </div>
@@ -33,8 +35,10 @@ export const PreviousRestoreItem = ({ clone }: { clone: CloneStatus['clones'][nu
         </div>
         <div>
           <TimestampInfo
-            className="font-mono text-xs text-foreground-lighter"
+            className="text-left !text-sm font-mono tracking-tight text-foreground-lighter"
+            displayAs="utc"
             utcTimestamp={clone.inserted_at ?? ''}
+            labelFormat="DD MMM YYYY HH:mm:ss (ZZ)"
           />
         </div>
         <div className="flex items-center justify-end text-foreground-lighter group-hover:text-foreground">