From 1b88fa6bd6070afb336f16b83f52f3456915328e Mon Sep 17 00:00:00 2001 From: Nico <47644445+nicotsx@users.noreply.github.com> Date: Fri, 2 Jan 2026 22:10:27 +0100 Subject: [PATCH] style: responsive fixes (#282) * style(backups): use container queries to avoid overflow when menu is open * style: fix breadcrumbs breaking the layout on smaller devices * style: improve wording and error displays * chore: wording --- app/client/components/app-breadcrumb.tsx | 2 +- app/client/components/layout.tsx | 6 +-- app/client/components/ui/breadcrumb.tsx | 16 ++++--- app/client/components/ui/card.tsx | 16 +++---- .../components/create-schedule-form.tsx | 12 +++--- .../components/schedule-mirrors-config.tsx | 8 ++-- .../schedule-notifications-config.tsx | 14 ++++--- .../backups/components/schedule-summary.tsx | 42 ++++++++++--------- .../backups/components/snapshot-timeline.tsx | 8 ++-- app/client/modules/backups/routes/backups.tsx | 2 +- .../components/create-repository-form.tsx | 5 ++- app/client/modules/repositories/tabs/info.tsx | 2 +- .../modules/repositories/tabs/snapshots.tsx | 6 +-- .../modules/settings/routes/settings.tsx | 8 ++-- 14 files changed, 78 insertions(+), 69 deletions(-) diff --git a/app/client/components/app-breadcrumb.tsx b/app/client/components/app-breadcrumb.tsx index b6c32b29..6f602f62 100644 --- a/app/client/components/app-breadcrumb.tsx +++ b/app/client/components/app-breadcrumb.tsx @@ -38,7 +38,7 @@ export function AppBreadcrumb() { } return ( - + {breadcrumbs.map((breadcrumb, index) => { const isLast = index === breadcrumbs.length - 1; diff --git a/app/client/components/layout.tsx b/app/client/components/layout.tsx index 8142c252..6030391d 100644 --- a/app/client/components/layout.tsx +++ b/app/client/components/layout.tsx @@ -43,8 +43,8 @@ export default function Layout({ loaderData }: Route.ComponentProps) {
-
-
+
+
@@ -76,7 +76,7 @@ export default function Layout({ loaderData }: Route.ComponentProps) {
-
+
diff --git a/app/client/components/ui/breadcrumb.tsx b/app/client/components/ui/breadcrumb.tsx index 4d0d3eab..e1fb0843 100644 --- a/app/client/components/ui/breadcrumb.tsx +++ b/app/client/components/ui/breadcrumb.tsx @@ -4,8 +4,8 @@ import { ChevronRight, MoreHorizontal } from "lucide-react"; import { cn } from "~/client/lib/utils"; -function Breadcrumb({ ...props }: React.ComponentProps<"nav">) { - return
diff --git a/app/client/modules/backups/components/create-schedule-form.tsx b/app/client/modules/backups/components/create-schedule-form.tsx index 38437f7f..63d3a8e0 100644 --- a/app/client/modules/backups/components/create-schedule-form.tsx +++ b/app/client/modules/backups/components/create-schedule-form.tsx @@ -195,12 +195,12 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }: Schedule automated backups of {volume.name} to a secure repository. - + ( - + Backup name @@ -215,7 +215,7 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }: control={form.control} name="repositoryId" render={({ field }) => ( - + Backup repository @@ -327,7 +327,7 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }: control={form.control} name="monthlyDays" render={({ field }) => ( - + Days of the month
@@ -512,7 +512,7 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }: Retention policy Define how many snapshots to keep. Leave empty to keep all. - + Mirror Repositories - + Configure secondary repositories where snapshots will be automatically copied after each backup
@@ -270,9 +270,9 @@ export const ScheduleMirrorsConfig = ({ scheduleId, primaryRepositoryId, reposit Repository - Enabled - Last Copy - + Enabled + Last Copy + diff --git a/app/client/modules/backups/components/schedule-notifications-config.tsx b/app/client/modules/backups/components/schedule-notifications-config.tsx index 820e72b7..0a1d4f37 100644 --- a/app/client/modules/backups/components/schedule-notifications-config.tsx +++ b/app/client/modules/backups/components/schedule-notifications-config.tsx @@ -152,7 +152,9 @@ export const ScheduleNotificationsConfig = ({ scheduleId, destinations }: Props) Notifications - Configure which notifications to send for this backup schedule + + Configure which notifications to send for this backup schedule +
{!isAddingNew && availableDestinations.length > 0 && ( ) : ( - )} {schedule.retentionPolicy && ( @@ -123,28 +123,28 @@ export const ScheduleSummary = (props: Props) => { size="sm" loading={runForget.isPending} onClick={() => setShowForgetConfirm(true)} - className="w-full sm:w-auto" + className="w-full @md:w-auto" > - Run cleanup + Run cleanup )} - - +

Schedule

{summary.scheduleLabel}

@@ -178,19 +178,21 @@ export const ScheduleSummary = (props: Props) => {
{schedule.lastBackupStatus === "warning" && ( -
+

Warning Details

-

+

{schedule.lastBackupError ?? "Last backup completed with warnings. Check your container logs for more details."}

)} - {schedule.lastBackupError && ( -
-

Error Details

-

{schedule.lastBackupError}

+ {schedule.lastBackupError && schedule.lastBackupStatus === "error" && ( +
+

Error details

+

+ {schedule.lastBackupError} +

)} diff --git a/app/client/modules/backups/components/snapshot-timeline.tsx b/app/client/modules/backups/components/snapshot-timeline.tsx index 4bdce96c..7ed68ef4 100644 --- a/app/client/modules/backups/components/snapshot-timeline.tsx +++ b/app/client/modules/backups/components/snapshot-timeline.tsx @@ -1,5 +1,5 @@ import { cn } from "~/client/lib/utils"; -import { Card } from "~/client/components/ui/card"; +import { Card, CardContent } from "~/client/components/ui/card"; import { ByteSize } from "~/client/components/bytes-size"; import { useEffect } from "react"; import type { ListSnapshotsResponse } from "~/client/api-client"; @@ -24,9 +24,9 @@ export const SnapshotTimeline = (props: Props) => { if (error) { return ( -
-

Error loading snapshots: {error}

-
+ +

{error}

+ ); } diff --git a/app/client/modules/backups/routes/backups.tsx b/app/client/modules/backups/routes/backups.tsx index 76f0c714..49b5ca54 100644 --- a/app/client/modules/backups/routes/backups.tsx +++ b/app/client/modules/backups/routes/backups.tsx @@ -117,7 +117,7 @@ export default function Backups({ loaderData }: Route.ComponentProps) {
-
+
{items.map((id) => { const schedule = scheduleMap.get(id); if (!schedule) return null; diff --git a/app/client/modules/repositories/components/create-repository-form.tsx b/app/client/modules/repositories/components/create-repository-form.tsx index 827cb2cf..becbf94d 100644 --- a/app/client/modules/repositories/components/create-repository-form.tsx +++ b/app/client/modules/repositories/components/create-repository-form.tsx @@ -226,12 +226,13 @@ export const CreateRepositoryForm = ({ - Use Zerobyte's password + Use the existing recovery key Enter password manually - Choose whether to use Zerobyte's master password or enter a custom password for the existing repository. + Choose whether to use Zerobyte's recovery key (which you downloaded when creating your account) or enter + a custom password for the existing repository. diff --git a/app/client/modules/repositories/tabs/info.tsx b/app/client/modules/repositories/tabs/info.tsx index 135264f7..2b62871a 100644 --- a/app/client/modules/repositories/tabs/info.tsx +++ b/app/client/modules/repositories/tabs/info.tsx @@ -147,7 +147,7 @@ export const RepositoryInfoTabContent = ({ repository }: Props) => {

Last Error

-

{repository.lastError}

+

{repository.lastError}

)} diff --git a/app/client/modules/repositories/tabs/snapshots.tsx b/app/client/modules/repositories/tabs/snapshots.tsx index dea2a5d8..8b124755 100644 --- a/app/client/modules/repositories/tabs/snapshots.tsx +++ b/app/client/modules/repositories/tabs/snapshots.tsx @@ -46,13 +46,13 @@ export const RepositorySnapshotsTabContent = ({ repository }: Props) => { -

Repository Error

+

Repository error

This repository is in an error state and cannot be accessed.

{repository.lastError && ( -
-

{repository.lastError}

+
+

{repository.lastError}

)} diff --git a/app/client/modules/settings/routes/settings.tsx b/app/client/modules/settings/routes/settings.tsx index 7bbd0dfd..aca29aaf 100644 --- a/app/client/modules/settings/routes/settings.tsx +++ b/app/client/modules/settings/routes/settings.tsx @@ -206,7 +206,7 @@ export default function Settings({ loaderData }: Route.ComponentProps) { Backup Recovery Key - Download your Restic password file for disaster recovery + Download your recovery key for Restic backups

@@ -219,15 +219,15 @@ export default function Settings({ loaderData }: Route.ComponentProps) {

- Download Restic Password + Download Recovery Key - For security reasons, please enter your account password to download the Restic password file. + For security reasons, please enter your account password to download the recovery key file.