dashboard: tweak min width of 2 column layout in backups page (#42165)

GitOrigin-RevId: 5f1272781a2f0c62804ea0dcba5d82d9384fa898

Author: atrakh

npm-packages/dashboard/src/components/deploymentSettings/BackupListItem.tsx

@@ -373,12 +373,12 @@ function RestoreConfirmation({
  team={team}
  />
 
- <p className="my-2">
+ <p className="my-2 text-sm">
  The data (tables and files) in <code>{targetDeployment.name}</code> will
  be replaced by the contents of the backup.
  </p>
 
- <p className="text-content-secondary">
+ <p className="text-sm text-content-secondary">
  The rest of your deployment configuration (code, environment variables,
  scheduled functions, etc.) will not be changed.
  </p>
@@ -506,7 +506,7 @@ function BackupSummary({
  );
 
  return (
- <div className="my-8 flex flex-col items-center gap-2">
+ <div className="my-4 flex flex-col items-center gap-2">
  <p className="flex items-center gap-2 text-content-tertiary">
  <ArchiveIcon className="size-6" /> Backup
  </p>
@@ -560,7 +560,7 @@ function DeploymentSummary({
  team,
 }: DeploymentSummaryProps) {
  return (
- <div className="my-8 flex flex-col items-center gap-2">
+ <div className="my-4 flex flex-col items-center gap-2">
  <p className="flex items-center gap-2 text-content-tertiary">
  <ServerIcon className="size-6" /> Deployment
  </p>
@@ -584,7 +584,7 @@ export function TransferSummary({
  team: Team;
 }) {
  return (
- <div className="grid justify-center gap-2 md:flex md:gap-5">
+ <div className="mb-4 grid justify-center gap-2 rounded-lg border md:flex md:gap-5">
  <BackupSummary
  backup={backup}
  sourceDeploymentAppearance={
@@ -595,7 +595,7 @@ export function TransferSummary({
  team={team}
  />
 
- <div className="md:my-8">
+ <div className="flex w-full justify-center md:my-4 md:w-fit">
  <ArrowDownIcon className="size-6 text-content-tertiary md:hidden" />
  <ArrowRightIcon className="hidden size-6 text-content-tertiary md:block" />
  </div>

npm-packages/dashboard/src/components/deploymentSettings/BackupRestoreStatus.tsx

@@ -107,7 +107,7 @@ export function BackupRestoreFail({
 
  return (
  <>
- <div className="flex min-h-16 flex-wrap items-center gap-2 rounded-sm border bg-background-secondary px-4 py-2">
+ <div className="flex min-h-16 flex-wrap items-center gap-2 rounded-lg border bg-background-secondary px-4 py-2">
  <div className="flex grow gap-2">
  <CrossCircledIcon className="size-5 shrink-0 text-content-errorSecondary" />
  <p className="grow text-sm leading-tight text-balance text-content-secondary">
@@ -175,7 +175,7 @@ export function BackupRestoreSuccess({
 
  return (
  <>
- <div className="flex min-h-16 flex-wrap items-center gap-2 rounded-sm border bg-background-secondary px-4 py-2">
+ <div className="flex min-h-16 flex-wrap items-center gap-2 rounded-lg border bg-background-secondary px-4 py-2">
  <div className="flex grow items-center gap-2">
  <CheckCircledIcon className="shrink-0 text-content-success" />
  <p className="grow text-sm leading-tight text-balance text-content-secondary">
@@ -231,7 +231,7 @@ export function BackupRestoreOngoing({
  progressMessage: string;
 }) {
  return (
- <div className="flex min-h-16 flex-col flex-wrap justify-center gap-2 rounded-sm border bg-background-secondary px-4 py-2 text-sm">
+ <div className="flex min-h-16 flex-col flex-wrap justify-center gap-2 rounded-lg border bg-background-secondary px-4 py-2 text-sm">
  <div className="flex flex-wrap justify-end gap-4">
  <div className="grow font-semibold">Restoring from a backup</div>
  <div className="min-w-56 text-right text-content-secondary">

npm-packages/dashboard/src/components/deploymentSettings/Backups.tsx

@@ -54,7 +54,7 @@ export function Backups({
 
  return (
  <div className="flex h-full flex-col gap-4">
- <div className="mb-4 flex flex-wrap items-center justify-between gap-4">
+ <div className="flex flex-wrap items-center justify-between gap-4">
  <h3 className="min-w-fit">Backup & Restore</h3>
  <span className="text-sm">
  Use this page to automatically or manually backup and restore your
@@ -67,8 +67,8 @@ export function Backups({
  </Link>
  </span>
  </div>
- <div className="scrollbar flex grow flex-col gap-8 overflow-auto pt-1 pl-1 lg:flex-row lg:overflow-hidden">
- <div className="flex shrink-0 flex-col lg:w-60">
+ <div className="scrollbar flex grow flex-col gap-4 overflow-auto pt-1 pl-1 xl:flex-row xl:overflow-hidden">
+ <Sheet className="flex h-fit w-full shrink-0 flex-col items-start gap-6 xl:w-60 xl:items-center">
  {periodicBackupsEnabled ? (
  <AutomaticBackupSelector
  deployment={deployment}
@@ -92,8 +92,6 @@ export function Backups({
  </Tooltip>
  )}
 
- <hr className="my-6 w-full" />
-
  <BackupNowButton
  deployment={deployment}
  team={team}
@@ -105,9 +103,9 @@ export function Backups({
  periodicBackupsEnabled={periodicBackupsEnabled}
  maxCloudBackups={maxCloudBackups}
  />
- </div>
+ </Sheet>
 
- <div className="flex flex-col gap-4 pb-8 lg:grow lg:pb-0">
+ <div className="flex flex-col gap-4 pb-8 xl:grow xl:pb-0">
  {existingExport &&
  existingExport._creationTime < new Date("2024-11-15").getTime() &&
  existingExport.state === "completed" &&
@@ -194,7 +192,7 @@ function AutomaticBackupSelector({
  : undefined
  }
  >
- <div className="flex flex-col gap-2">
+ <div className="flex w-full flex-col gap-2">
  <label className="mb-1 flex items-center gap-2 text-sm">
  <Checkbox
  checked={!!periodicBackup}

npm-packages/dashboard/src/components/deploymentSettings/SnapshotImport.tsx

@@ -245,39 +245,50 @@ export function ImportSummary({
  >(),
  );
  return (
- <div>
+ <div className="flex flex-col gap-4">
  {Array.from(checkpointsByComponent.entries()).map(
  ([componentPath, checkpoints]) => (
  <div key={componentPath}>
  {componentPath ? (
- <div className="flex w-full items-center space-x-1">
- <PuzzlePieceIcon />
+ <h5 className="mb-1 flex w-full items-center space-x-1">
+ <PuzzlePieceIcon className="text-content-secondary" />
  <span>{componentPath}</span>
- </div>
+ </h5>
  ) : null}
- <table className="mr-auto border-collapse border text-left">
+ <table className="mr-auto border-collapse border text-left text-xs">
  <thead className="border">
  <tr>
- <th className="border px-2 font-semibold">table</th>
- <th className="border px-2 font-semibold">create</th>
- <th className="border px-2 font-semibold">delete</th>
+ <th className="border px-2 py-0.5 font-semibold">Table</th>
+ <th className="border px-2 py-0.5 font-semibold">Created</th>
+ <th className="border px-2 py-0.5 font-semibold">Deleted</th>
  </tr>
  </thead>
  <tbody>
  {checkpoints.map((checkpoint) => (
  <tr key={checkpoint.display_table_name}>
- <td className="border px-2">
+ <td className="border px-2 py-0.5 font-mono">
  <span>{checkpoint.display_table_name}</span>
  </td>
- <td className="border px-2">
+ <td className="border px-2 py-0.5 tabular-nums">
  {Number(
  checkpoint.total_num_rows_to_write,
  ).toLocaleString()}{" "}
  {checkpoint.display_table_name === "_storage"
  ? `file${Number(checkpoint.total_num_rows_to_write) === 1 ? "" : "s"}`
  : `document${Number(checkpoint.total_num_rows_to_write) === 1 ? "" : "s"}`}
  </td>
- <td className="border px-2">{`${Number(checkpoint.existing_rows_to_delete).toLocaleString()} of ${Number(checkpoint.existing_rows_in_table).toLocaleString()} ${checkpoint.display_table_name === "_storage" ? "files" : "documents"}`}</td>
+ <td className="border px-2 py-0.5 tabular-nums">
+ {Number(
+ checkpoint.existing_rows_to_delete,
+ ).toLocaleString()}{" "}
+ of{" "}
+ {Number(
+ checkpoint.existing_rows_in_table,
+ ).toLocaleString()}{" "}
+ {checkpoint.display_table_name === "_storage"
+ ? "files"
+ : "documents"}
+ </td>
  </tr>
  ))}
  </tbody>