Refine views for mobile-first and responsive layouts

docs/progress.md

@@ -2,6 +2,31 @@
 
 Updated: 2026-02-15
 
+## Latest Milestone (2026-02-15): Cross-View Responsive Pass
+
+Audited and adjusted the main product views for mobile-first behavior while preserving desktop/web UX:
+
+- Updated responsive behavior and compact spacing for:
+  - `lib/features/dashboard/dashboard_view.dart`
+  - `lib/features/moments/moments_view.dart`
+  - `lib/features/ideas/ideas_view.dart`
+  - `lib/features/reminders/reminders_view.dart`
+  - `lib/features/signals/signals_view.dart`
+  - `lib/features/settings/settings_view.dart`
+  - `lib/features/sync/sync_view.dart`
+  - `lib/features/auth/sign_in_view.dart`
+  - `lib/features/people/people_view.dart`
+- Removed narrow-width overflow hotspots:
+  - stacked compact headers/actions instead of single fixed rows
+  - converted key action rows to `Wrap`/column where needed
+  - improved list-item text constraints (`maxLines`, `ellipsis`)
+  - made editor dialogs width-safe using max-width constraints
+
+Validation for this milestone:
+
+- `flutter analyze` -> pass
+- `flutter test` -> pass
+
 ## Latest Milestone (2026-02-15): People Mobile Layout Fix
 
 Fixed the `People` view so it is mobile-friendly and no longer overflows on iOS narrow screens:

lib/features/auth/sign_in_view.dart

@@ -45,7 +45,10 @@ class _SignInViewState extends ConsumerState<SignInView> {
         child: Padding(
           padding: const EdgeInsets.all(24),
           child: FrostedCard(
-            child: Column(
+            child: LayoutBuilder(
+              builder: (BuildContext context, BoxConstraints constraints) {
+                final bool compact = constraints.maxWidth < 480;
+                return Column(
                   mainAxisSize: MainAxisSize.min,
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: <Widget>[
@@ -61,6 +64,31 @@ class _SignInViewState extends ConsumerState<SignInView> {
                       ),
                     ),
                     const SizedBox(height: 18),
+                    if (compact)
+                      DropdownButtonFormField<SignInMethod>(
+                        initialValue: _method,
+                        items: SignInMethod.values
+                            .map(
+                              (SignInMethod method) =>
+                                  DropdownMenuItem<SignInMethod>(
+                                    value: method,
+                                    child: Text(_labelForMethod(method)),
+                                  ),
+                            )
+                            .toList(growable: false),
+                        onChanged: busy
+                            ? null
+                            : (SignInMethod? value) {
+                                if (value == null) {
+                                  return;
+                                }
+                                setState(() {
+                                  _method = value;
+                                });
+                              },
+                        decoration: const InputDecoration(labelText: 'Method'),
+                      )
+                    else
                       SegmentedButton<SignInMethod>(
                         segments: const <ButtonSegment<SignInMethod>>[
                           ButtonSegment<SignInMethod>(
@@ -99,26 +127,32 @@ class _SignInViewState extends ConsumerState<SignInView> {
                         controller: _passwordController,
                         obscureText: true,
                         enabled: !busy,
-                    decoration: const InputDecoration(labelText: 'Password'),
+                        decoration: const InputDecoration(
+                          labelText: 'Password',
+                        ),
                       ),
                     if (_method == SignInMethod.oidc)
                       TextField(
                         controller: _idTokenController,
                         enabled: !busy,
-                    decoration: const InputDecoration(labelText: 'ID Token'),
+                        decoration: const InputDecoration(
+                          labelText: 'ID Token',
+                        ),
                       ),
                     if (error != null)
                       Padding(
                         padding: const EdgeInsets.only(top: 10),
                         child: Text(
                           'Sign-in failed: $error',
-                      style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                          style: Theme.of(context).textTheme.bodyMedium
-                        color: const Color(0xFFC83030),
+                              ?.copyWith(color: const Color(0xFFC83030)),
-                      ),
                         ),
                       ),
                     const SizedBox(height: 16),
-                Row(
+                    Wrap(
+                      spacing: 12,
+                      runSpacing: 8,
+                      crossAxisAlignment: WrapCrossAlignment.center,
                       children: <Widget>[
                         FilledButton.icon(
                           onPressed: busy ? null : _submit,
@@ -134,18 +168,18 @@ class _SignInViewState extends ConsumerState<SignInView> {
                               : const Icon(Icons.login_rounded),
                           label: const Text('Sign In'),
                         ),
-                    const SizedBox(width: 12),
                         Text(
                           AppConfig.useFakeBackend
                               ? 'Fake mode enabled'
                               : 'REST mode (${AppConfig.backendBaseUrl})',
-                      style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                          style: Theme.of(context).textTheme.bodyMedium
-                        color: AppTheme.textSecondary,
+                              ?.copyWith(color: AppTheme.textSecondary),
-                      ),
                         ),
                       ],
                     ),
                   ],
+                );
+              },
             ),
           ),
         ),
@@ -173,4 +207,12 @@ class _SignInViewState extends ConsumerState<SignInView> {
           idToken: idToken,
         );
   }
+
+  String _labelForMethod(SignInMethod method) {
+    return switch (method) {
+      SignInMethod.password => 'Password',
+      SignInMethod.emailMagicLink => 'Magic Link',
+      SignInMethod.oidc => 'OIDC',
+    };
+  }
 }

lib/features/dashboard/dashboard_view.dart

@@ -19,43 +19,58 @@ class DashboardView extends ConsumerWidget {
         final DashboardSummary summary = data.summary();
         final List<DashboardTask> tasks = data.tasks;
 
+        return LayoutBuilder(
+          builder: (BuildContext context, BoxConstraints constraints) {
+            final bool compact = constraints.maxWidth < 720;
             return SingleChildScrollView(
-          padding: const EdgeInsets.fromLTRB(28, 24, 28, 36),
+              padding: EdgeInsets.fromLTRB(
+                compact ? 16 : 28,
+                compact ? 16 : 24,
+                compact ? 16 : 28,
+                compact ? 24 : 36,
+              ),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: <Widget>[
-              Text('Today', style: Theme.of(context).textTheme.headlineMedium),
+                  Text(
+                    'Today',
+                    style: Theme.of(context).textTheme.headlineMedium,
+                  ),
                   const SizedBox(height: 8),
                   Text(
                     'Focus on consistency over intensity. Small moments compound.',
-                style: Theme.of(
+                    style: Theme.of(context).textTheme.bodyLarge?.copyWith(
-                  context,
+                      color: AppTheme.textSecondary,
-                ).textTheme.bodyLarge?.copyWith(color: AppTheme.textSecondary),
+                    ),
                   ),
                   const SizedBox(height: 22),
                   Wrap(
-                spacing: 16,
+                    spacing: 12,
-                runSpacing: 16,
+                    runSpacing: 12,
                     children: <Widget>[
                       _StatCard(
                         label: 'Active People',
                         value: '${summary.activePeople}',
                         accent: const Color(0xFF16B8CA),
+                        compact: compact,
                       ),
                       _StatCard(
                         label: 'Upcoming Plans',
                         value: '${summary.upcomingPlans}',
                         accent: const Color(0xFF2B7FFF),
+                        compact: compact,
                       ),
                       _StatCard(
                         label: 'Pending Ideas',
                         value: '${summary.pendingIdeas}',
                         accent: const Color(0xFFFFA447),
+                        compact: compact,
                       ),
                       _StatCard(
                         label: 'Weekly Rhythm',
                         value: '${summary.weeklyConsistency}%',
                         accent: const Color(0xFF30B66A),
+                        compact: compact,
                       ),
                     ],
                   ),
@@ -72,6 +87,7 @@ class DashboardView extends ConsumerWidget {
                         ...tasks.map(
                           (DashboardTask task) => _TaskRow(
                             task: task,
+                            compact: compact,
                             onToggleDone: () {
                               ref
                                   .read(localRepositoryProvider.notifier)
@@ -86,6 +102,8 @@ class DashboardView extends ConsumerWidget {
               ),
             );
           },
+        );
+      },
       loading: () => const Center(child: CircularProgressIndicator()),
       error: (Object error, StackTrace stackTrace) {
         return Center(
@@ -104,18 +122,20 @@ class _StatCard extends StatelessWidget {
     required this.label,
     required this.value,
     required this.accent,
+    required this.compact,
   });
 
   final String label;
   final String value;
   final Color accent;
+  final bool compact;
 
   @override
   Widget build(BuildContext context) {
     return FrostedCard(
       padding: const EdgeInsets.all(16),
       child: SizedBox(
-        width: 188,
+        width: compact ? double.infinity : 188,
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: <Widget>[
@@ -149,10 +169,15 @@ class _StatCard extends StatelessWidget {
 }
 
 class _TaskRow extends StatelessWidget {
-  const _TaskRow({required this.task, required this.onToggleDone});
+  const _TaskRow({
+    required this.task,
+    required this.onToggleDone,
+    required this.compact,
+  });
 
   final DashboardTask task;
   final VoidCallback onToggleDone;
+  final bool compact;
 
   @override
   Widget build(BuildContext context) {
@@ -200,6 +225,7 @@ class _TaskRow extends StatelessWidget {
                 ],
               ),
             ),
+            if (!compact) ...<Widget>[
               const SizedBox(width: 12),
               Text(
                 _shortDate(task.when),
@@ -208,6 +234,7 @@ class _TaskRow extends StatelessWidget {
                 ).textTheme.labelLarge?.copyWith(color: AppTheme.textSecondary),
               ),
             ],
+          ],
         ),
       ),
     );

lib/features/ideas/ideas_view.dart

@@ -21,11 +21,42 @@ class IdeasView extends ConsumerWidget {
           for (final PersonProfile person in data.people) person.id: person,
         };
 
+        return LayoutBuilder(
+          builder: (BuildContext context, BoxConstraints constraints) {
+            final bool compact = constraints.maxWidth < 760;
             return Padding(
-          padding: const EdgeInsets.fromLTRB(28, 24, 28, 28),
+              padding: EdgeInsets.fromLTRB(
+                compact ? 16 : 28,
+                compact ? 16 : 24,
+                compact ? 16 : 28,
+                compact ? 20 : 28,
+              ),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: <Widget>[
+                  if (compact)
+                    Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: <Widget>[
+                        Text(
+                          'Ideas',
+                          style: Theme.of(context).textTheme.headlineMedium,
+                        ),
+                        const SizedBox(height: 6),
+                        Text(
+                          'Capture gift and event ideas before they slip away.',
+                          style: Theme.of(context).textTheme.bodyLarge
+                              ?.copyWith(color: AppTheme.textSecondary),
+                        ),
+                        const SizedBox(height: 12),
+                        FilledButton.icon(
+                          onPressed: () => _addIdea(context, ref, data.people),
+                          icon: const Icon(Icons.lightbulb_outline_rounded),
+                          label: const Text('Add Idea'),
+                        ),
+                      ],
+                    )
+                  else
                     Row(
                       children: <Widget>[
                         Expanded(
@@ -34,7 +65,9 @@ class IdeasView extends ConsumerWidget {
                             children: <Widget>[
                               Text(
                                 'Ideas',
-                          style: Theme.of(context).textTheme.headlineMedium,
+                                style: Theme.of(
+                                  context,
+                                ).textTheme.headlineMedium,
                               ),
                               const SizedBox(height: 6),
                               Text(
@@ -63,27 +96,35 @@ class IdeasView extends ConsumerWidget {
                             ? null
                             : peopleById[idea.personId!];
                         return FrostedCard(
-                      child: Row(
+                          child: compact
+                              ? Column(
                                   crossAxisAlignment: CrossAxisAlignment.start,
+                                  children: <Widget>[
+                                    Row(
                                       children: <Widget>[
                                         _IdeaTypeTag(type: idea.type),
-                          const SizedBox(width: 12),
+                                        const SizedBox(width: 8),
                                         Expanded(
-                            child: Column(
+                                          child: Text(
-                              crossAxisAlignment: CrossAxisAlignment.start,
-                              children: <Widget>[
-                                Text(
                                             idea.title,
-                                  style: Theme.of(context).textTheme.titleMedium
+                                            style: Theme.of(context)
+                                                .textTheme
+                                                .titleMedium
                                                 ?.copyWith(
                                                   decoration: idea.isArchived
-                                            ? TextDecoration.lineThrough
+                                                      ? TextDecoration
+                                                            .lineThrough
                                                       : null,
                                                 ),
+                                            maxLines: 2,
+                                            overflow: TextOverflow.ellipsis,
+                                          ),
+                                        ),
+                                      ],
                                     ),
                                     if (idea.details.trim().isNotEmpty)
                                       Padding(
-                                    padding: const EdgeInsets.only(top: 6),
+                                        padding: const EdgeInsets.only(top: 8),
                                         child: Text(
                                           idea.details,
                                           style: Theme.of(context)
@@ -96,9 +137,118 @@ class IdeasView extends ConsumerWidget {
                                       ),
                                     const SizedBox(height: 8),
                                     Text(
-                                  person == null ? 'Unassigned' : person.name,
+                                      person == null
-                                  style: Theme.of(context).textTheme.labelLarge
+                                          ? 'Unassigned'
-                                      ?.copyWith(color: AppTheme.textSecondary),
+                                          : person.name,
+                                      style: Theme.of(context)
+                                          .textTheme
+                                          .labelLarge
+                                          ?.copyWith(
+                                            color: AppTheme.textSecondary,
+                                          ),
+                                    ),
+                                    const SizedBox(height: 8),
+                                    Wrap(
+                                      spacing: 6,
+                                      runSpacing: 6,
+                                      children: <Widget>[
+                                        OutlinedButton.icon(
+                                          onPressed: () {
+                                            ref
+                                                .read(
+                                                  localRepositoryProvider
+                                                      .notifier,
+                                                )
+                                                .toggleIdeaArchived(idea.id);
+                                          },
+                                          icon: Icon(
+                                            idea.isArchived
+                                                ? Icons.unarchive_outlined
+                                                : Icons.archive_outlined,
+                                          ),
+                                          label: Text(
+                                            idea.isArchived
+                                                ? 'Unarchive'
+                                                : 'Archive',
+                                          ),
+                                        ),
+                                        OutlinedButton.icon(
+                                          onPressed: () => _editIdea(
+                                            context,
+                                            ref,
+                                            data.people,
+                                            idea,
+                                          ),
+                                          icon: const Icon(Icons.edit_rounded),
+                                          label: const Text('Edit'),
+                                        ),
+                                        TextButton.icon(
+                                          onPressed: () {
+                                            ref
+                                                .read(
+                                                  localRepositoryProvider
+                                                      .notifier,
+                                                )
+                                                .deleteIdea(idea.id);
+                                          },
+                                          icon: const Icon(
+                                            Icons.delete_outline_rounded,
+                                          ),
+                                          label: const Text('Delete'),
+                                        ),
+                                      ],
+                                    ),
+                                  ],
+                                )
+                              : Row(
+                                  crossAxisAlignment: CrossAxisAlignment.start,
+                                  children: <Widget>[
+                                    _IdeaTypeTag(type: idea.type),
+                                    const SizedBox(width: 12),
+                                    Expanded(
+                                      child: Column(
+                                        crossAxisAlignment:
+                                            CrossAxisAlignment.start,
+                                        children: <Widget>[
+                                          Text(
+                                            idea.title,
+                                            style: Theme.of(context)
+                                                .textTheme
+                                                .titleMedium
+                                                ?.copyWith(
+                                                  decoration: idea.isArchived
+                                                      ? TextDecoration
+                                                            .lineThrough
+                                                      : null,
+                                                ),
+                                          ),
+                                          if (idea.details.trim().isNotEmpty)
+                                            Padding(
+                                              padding: const EdgeInsets.only(
+                                                top: 6,
+                                              ),
+                                              child: Text(
+                                                idea.details,
+                                                style: Theme.of(context)
+                                                    .textTheme
+                                                    .bodyMedium
+                                                    ?.copyWith(
+                                                      color: AppTheme
+                                                          .textSecondary,
+                                                    ),
+                                              ),
+                                            ),
+                                          const SizedBox(height: 8),
+                                          Text(
+                                            person == null
+                                                ? 'Unassigned'
+                                                : person.name,
+                                            style: Theme.of(context)
+                                                .textTheme
+                                                .labelLarge
+                                                ?.copyWith(
+                                                  color: AppTheme.textSecondary,
+                                                ),
                                           ),
                                         ],
                                       ),
@@ -109,7 +259,10 @@ class IdeasView extends ConsumerWidget {
                                         IconButton(
                                           onPressed: () {
                                             ref
-                                      .read(localRepositoryProvider.notifier)
+                                                .read(
+                                                  localRepositoryProvider
+                                                      .notifier,
+                                                )
                                                 .toggleIdeaArchived(idea.id);
                                           },
                                           icon: Icon(
@@ -122,18 +275,27 @@ class IdeasView extends ConsumerWidget {
                                               : 'Archive',
                                         ),
                                         IconButton(
-                                onPressed: () =>
+                                          onPressed: () => _editIdea(
-                                    _editIdea(context, ref, data.people, idea),
+                                            context,
+                                            ref,
+                                            data.people,
+                                            idea,
+                                          ),
                                           icon: const Icon(Icons.edit_rounded),
                                           tooltip: 'Edit',
                                         ),
                                         IconButton(
                                           onPressed: () {
                                             ref
-                                      .read(localRepositoryProvider.notifier)
+                                                .read(
+                                                  localRepositoryProvider
+                                                      .notifier,
+                                                )
                                                 .deleteIdea(idea.id);
                                           },
-                                icon: const Icon(Icons.delete_outline_rounded),
+                                          icon: const Icon(
+                                            Icons.delete_outline_rounded,
+                                          ),
                                           tooltip: 'Delete',
                                         ),
                                       ],
@@ -148,6 +310,8 @@ class IdeasView extends ConsumerWidget {
               ),
             );
           },
+        );
+      },
       loading: () => const Center(child: CircularProgressIndicator()),
       error: (Object error, StackTrace stackTrace) {
         return const Center(child: Text('Unable to load ideas'));
@@ -293,9 +457,9 @@ class _IdeaEditorDialogState extends State<_IdeaEditorDialog> {
   Widget build(BuildContext context) {
     return AlertDialog(
       title: Text(widget.title),
-      content: SizedBox(
+      content: SingleChildScrollView(
-        width: 430,
+        child: ConstrainedBox(
-        child: SingleChildScrollView(
+          constraints: const BoxConstraints(maxWidth: 430),
           child: Column(
             mainAxisSize: MainAxisSize.min,
             children: <Widget>[

lib/features/moments/moments_view.dart

@@ -44,8 +44,16 @@ class _MomentsViewState extends ConsumerState<MomentsView> {
             ? _selectedPersonId
             : fallbackPersonId;
 
+        return LayoutBuilder(
+          builder: (BuildContext context, BoxConstraints constraints) {
+            final bool compact = constraints.maxWidth < 760;
             return Padding(
-          padding: const EdgeInsets.fromLTRB(28, 24, 28, 28),
+              padding: EdgeInsets.fromLTRB(
+                compact ? 16 : 28,
+                compact ? 16 : 24,
+                compact ? 16 : 28,
+                compact ? 20 : 28,
+              ),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: <Widget>[
@@ -56,19 +64,19 @@ class _MomentsViewState extends ConsumerState<MomentsView> {
                   const SizedBox(height: 6),
                   Text(
                     'Capture wins and signals from everyday interactions.',
-                style: Theme.of(
+                    style: Theme.of(context).textTheme.bodyLarge?.copyWith(
-                  context,
+                      color: AppTheme.textSecondary,
-                ).textTheme.bodyLarge?.copyWith(color: AppTheme.textSecondary),
+                    ),
                   ),
                   const SizedBox(height: 16),
                   FrostedCard(
                     child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
                       children: <Widget>[
-                    Row(
+                        TextField(
-                      children: <Widget>[
-                        Expanded(
-                          child: TextField(
                           controller: _captureController,
+                          minLines: 1,
+                          maxLines: compact ? 4 : 2,
                           decoration: InputDecoration(
                             hintText:
                                 'Quick capture: what happened, how it felt, what to repeat...',
@@ -77,8 +85,46 @@ class _MomentsViewState extends ConsumerState<MomentsView> {
                             border: InputBorder.none,
                           ),
                         ),
+                        const SizedBox(height: 8),
+                        if (compact)
+                          Column(
+                            crossAxisAlignment: CrossAxisAlignment.stretch,
+                            children: <Widget>[
+                              if (people.isNotEmpty)
+                                DropdownButtonFormField<String>(
+                                  initialValue: activePerson,
+                                  items: people
+                                      .map(
+                                        (PersonProfile person) =>
+                                            DropdownMenuItem<String>(
+                                              value: person.id,
+                                              child: Text(person.name),
                                             ),
-                        const SizedBox(width: 8),
+                                      )
+                                      .toList(growable: false),
+                                  onChanged: (String? value) {
+                                    setState(() {
+                                      _selectedPersonId = value;
+                                    });
+                                  },
+                                  decoration: const InputDecoration(
+                                    labelText: 'Person',
+                                  ),
+                                ),
+                              const SizedBox(height: 10),
+                              FilledButton.icon(
+                                onPressed:
+                                    people.isEmpty || activePerson == null
+                                    ? null
+                                    : () => _addCapture(activePerson),
+                                icon: const Icon(Icons.add_rounded),
+                                label: const Text('Add Capture'),
+                              ),
+                            ],
+                          )
+                        else
+                          Row(
+                            children: <Widget>[
                               if (people.isNotEmpty)
                                 DropdownButton<String>(
                                   value: activePerson,
@@ -100,7 +146,8 @@ class _MomentsViewState extends ConsumerState<MomentsView> {
                                 ),
                               const SizedBox(width: 8),
                               FilledButton.icon(
-                          onPressed: people.isEmpty || activePerson == null
+                                onPressed:
+                                    people.isEmpty || activePerson == null
                                     ? null
                                     : () => _addCapture(activePerson),
                                 icon: const Icon(Icons.add_rounded),
@@ -127,9 +174,69 @@ class _MomentsViewState extends ConsumerState<MomentsView> {
                       separatorBuilder: (_, _) => const SizedBox(height: 12),
                       itemBuilder: (BuildContext context, int index) {
                         final RelationshipMoment moment = moments[index];
-                    final PersonProfile? person = peopleById[moment.personId];
+                        final PersonProfile? person =
+                            peopleById[moment.personId];
                         return FrostedCard(
-                      child: Row(
+                          child: compact
+                              ? Column(
+                                  crossAxisAlignment: CrossAxisAlignment.start,
+                                  children: <Widget>[
+                                    Row(
+                                      children: <Widget>[
+                                        Container(
+                                          width: 10,
+                                          height: 10,
+                                          decoration: const BoxDecoration(
+                                            color: Color(0xFF1AB6C8),
+                                            shape: BoxShape.circle,
+                                          ),
+                                        ),
+                                        const SizedBox(width: 10),
+                                        Expanded(
+                                          child: Text(
+                                            moment.title,
+                                            style: Theme.of(
+                                              context,
+                                            ).textTheme.titleMedium,
+                                            maxLines: 1,
+                                            overflow: TextOverflow.ellipsis,
+                                          ),
+                                        ),
+                                        IconButton(
+                                          onPressed: () {
+                                            ref
+                                                .read(
+                                                  localRepositoryProvider
+                                                      .notifier,
+                                                )
+                                                .deleteMoment(moment.id);
+                                          },
+                                          icon: const Icon(
+                                            Icons.delete_outline_rounded,
+                                          ),
+                                          tooltip: 'Delete capture',
+                                        ),
+                                      ],
+                                    ),
+                                    Text(
+                                      '${person?.name ?? 'Unknown'} • ${moment.type.toUpperCase()} • ${moment.at.month}/${moment.at.day}',
+                                      style: Theme.of(context)
+                                          .textTheme
+                                          .labelLarge
+                                          ?.copyWith(
+                                            color: AppTheme.textSecondary,
+                                          ),
+                                    ),
+                                    const SizedBox(height: 8),
+                                    Text(
+                                      moment.summary,
+                                      style: Theme.of(
+                                        context,
+                                      ).textTheme.bodyLarge,
+                                    ),
+                                  ],
+                                )
+                              : Row(
                                   crossAxisAlignment: CrossAxisAlignment.start,
                                   children: <Widget>[
                                     Container(
@@ -144,7 +251,8 @@ class _MomentsViewState extends ConsumerState<MomentsView> {
                                     const SizedBox(width: 12),
                                     Expanded(
                                       child: Column(
-                              crossAxisAlignment: CrossAxisAlignment.start,
+                                        crossAxisAlignment:
+                                            CrossAxisAlignment.start,
                                         children: <Widget>[
                                           Text(
                                             moment.title,
@@ -155,34 +263,50 @@ class _MomentsViewState extends ConsumerState<MomentsView> {
                                           const SizedBox(height: 4),
                                           Text(
                                             '${person?.name ?? 'Unknown'} • ${moment.type.toUpperCase()}',
-                                  style: Theme.of(context).textTheme.labelLarge
+                                            style: Theme.of(context)
-                                      ?.copyWith(color: AppTheme.textSecondary),
+                                                .textTheme
+                                                .labelLarge
+                                                ?.copyWith(
+                                                  color: AppTheme.textSecondary,
+                                                ),
                                           ),
                                           const SizedBox(height: 8),
                                           Text(
                                             moment.summary,
-                                  style: Theme.of(context).textTheme.bodyLarge,
+                                            style: Theme.of(
+                                              context,
+                                            ).textTheme.bodyLarge,
                                           ),
                                         ],
                                       ),
                                     ),
                                     const SizedBox(width: 12),
                                     Column(
-                            crossAxisAlignment: CrossAxisAlignment.end,
+                                      crossAxisAlignment:
+                                          CrossAxisAlignment.end,
                                       children: <Widget>[
                                         Text(
                                           '${moment.at.month}/${moment.at.day}',
-                                style: Theme.of(context).textTheme.labelLarge
+                                          style: Theme.of(context)
-                                    ?.copyWith(color: AppTheme.textSecondary),
+                                              .textTheme
+                                              .labelLarge
+                                              ?.copyWith(
+                                                color: AppTheme.textSecondary,
+                                              ),
                                         ),
                                         const SizedBox(height: 8),
                                         IconButton(
                                           onPressed: () {
                                             ref
-                                      .read(localRepositoryProvider.notifier)
+                                                .read(
+                                                  localRepositoryProvider
+                                                      .notifier,
+                                                )
                                                 .deleteMoment(moment.id);
                                           },
-                                icon: const Icon(Icons.delete_outline_rounded),
+                                          icon: const Icon(
+                                            Icons.delete_outline_rounded,
+                                          ),
                                           tooltip: 'Delete capture',
                                         ),
                                       ],
@@ -197,6 +321,8 @@ class _MomentsViewState extends ConsumerState<MomentsView> {
               ),
             );
           },
+        );
+      },
       loading: () => const Center(child: CircularProgressIndicator()),
       error: (Object error, StackTrace stackTrace) {
         return const Center(child: Text('Unable to load moments'));

lib/features/people/people_view.dart

@@ -585,8 +585,8 @@ class _PersonEditorDialogState extends State<_PersonEditorDialog> {
     return AlertDialog(
       title: Text(widget.title),
       content: SingleChildScrollView(
-        child: SizedBox(
+        child: ConstrainedBox(
-          width: 420,
+          constraints: const BoxConstraints(maxWidth: 420),
           child: Column(
             mainAxisSize: MainAxisSize.min,
             children: <Widget>[

lib/features/reminders/reminders_view.dart

@@ -21,15 +21,21 @@ class RemindersView extends ConsumerWidget {
           for (final PersonProfile person in data.people) person.id: person,
         };
 
+        return LayoutBuilder(
+          builder: (BuildContext context, BoxConstraints constraints) {
+            final bool compact = constraints.maxWidth < 760;
             return Padding(
-          padding: const EdgeInsets.fromLTRB(28, 24, 28, 28),
+              padding: EdgeInsets.fromLTRB(
+                compact ? 16 : 28,
+                compact ? 16 : 24,
+                compact ? 16 : 28,
+                compact ? 20 : 28,
+              ),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: <Widget>[
-              Row(
+                  if (compact)
-                children: <Widget>[
+                    Column(
-                  Expanded(
-                    child: Column(
                       crossAxisAlignment: CrossAxisAlignment.start,
                       children: <Widget>[
                         Text(
@@ -42,11 +48,40 @@ class RemindersView extends ConsumerWidget {
                           style: Theme.of(context).textTheme.bodyLarge
                               ?.copyWith(color: AppTheme.textSecondary),
                         ),
+                        const SizedBox(height: 12),
+                        FilledButton.icon(
+                          onPressed: () =>
+                              _addReminder(context, ref, data.people),
+                          icon: const Icon(Icons.alarm_add_rounded),
+                          label: const Text('Add Reminder'),
+                        ),
+                      ],
+                    )
+                  else
+                    Row(
+                      children: <Widget>[
+                        Expanded(
+                          child: Column(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: <Widget>[
+                              Text(
+                                'Reminders',
+                                style: Theme.of(
+                                  context,
+                                ).textTheme.headlineMedium,
+                              ),
+                              const SizedBox(height: 6),
+                              Text(
+                                'Set recurring nudges so good intentions become habits.',
+                                style: Theme.of(context).textTheme.bodyLarge
+                                    ?.copyWith(color: AppTheme.textSecondary),
+                              ),
                             ],
                           ),
                         ),
                         FilledButton.icon(
-                    onPressed: () => _addReminder(context, ref, data.people),
+                          onPressed: () =>
+                              _addReminder(context, ref, data.people),
                           icon: const Icon(Icons.alarm_add_rounded),
                           label: const Text('Add Reminder'),
                         ),
@@ -64,11 +99,96 @@ class RemindersView extends ConsumerWidget {
                             : peopleById[reminder.personId!];
 
                         return FrostedCard(
-                      child: Row(
+                          child: compact
+                              ? Column(
+                                  crossAxisAlignment: CrossAxisAlignment.start,
+                                  children: <Widget>[
+                                    Row(
+                                      children: <Widget>[
+                                        Expanded(
+                                          child: Text(
+                                            reminder.title,
+                                            style: Theme.of(
+                                              context,
+                                            ).textTheme.titleMedium,
+                                            maxLines: 2,
+                                            overflow: TextOverflow.ellipsis,
+                                          ),
+                                        ),
+                                        Switch(
+                                          value: reminder.enabled,
+                                          onChanged: (_) {
+                                            ref
+                                                .read(
+                                                  localRepositoryProvider
+                                                      .notifier,
+                                                )
+                                                .toggleReminderEnabled(
+                                                  reminder.id,
+                                                );
+                                          },
+                                        ),
+                                      ],
+                                    ),
+                                    Text(
+                                      '${_labelForCadence(reminder.cadence)} • ${_formatDateTime(reminder.nextAt)}',
+                                      style: Theme.of(context)
+                                          .textTheme
+                                          .bodyMedium
+                                          ?.copyWith(
+                                            color: AppTheme.textSecondary,
+                                          ),
+                                    ),
+                                    const SizedBox(height: 4),
+                                    Text(
+                                      person == null
+                                          ? 'Unassigned'
+                                          : person.name,
+                                      style: Theme.of(context)
+                                          .textTheme
+                                          .labelLarge
+                                          ?.copyWith(
+                                            color: AppTheme.textSecondary,
+                                          ),
+                                    ),
+                                    const SizedBox(height: 8),
+                                    Wrap(
+                                      spacing: 8,
+                                      children: <Widget>[
+                                        OutlinedButton.icon(
+                                          onPressed: () => _editReminder(
+                                            context,
+                                            ref,
+                                            data.people,
+                                            reminder,
+                                          ),
+                                          icon: const Icon(Icons.edit_rounded),
+                                          label: const Text('Edit'),
+                                        ),
+                                        TextButton.icon(
+                                          onPressed: () {
+                                            ref
+                                                .read(
+                                                  localRepositoryProvider
+                                                      .notifier,
+                                                )
+                                                .deleteReminder(reminder.id);
+                                          },
+                                          icon: const Icon(
+                                            Icons.delete_outline_rounded,
+                                          ),
+                                          label: const Text('Delete'),
+                                        ),
+                                      ],
+                                    ),
+                                  ],
+                                )
+                              : Row(
                                   children: <Widget>[
                                     Expanded(
                                       child: Column(
-                              crossAxisAlignment: CrossAxisAlignment.start,
+                                        crossAxisAlignment:
+                                            CrossAxisAlignment.start,
                                         children: <Widget>[
                                           Text(
                                             reminder.title,
@@ -79,14 +199,24 @@ class RemindersView extends ConsumerWidget {
                                           const SizedBox(height: 4),
                                           Text(
                                             '${_labelForCadence(reminder.cadence)} • ${_formatDateTime(reminder.nextAt)}',
-                                  style: Theme.of(context).textTheme.bodyMedium
+                                            style: Theme.of(context)
-                                      ?.copyWith(color: AppTheme.textSecondary),
+                                                .textTheme
+                                                .bodyMedium
+                                                ?.copyWith(
+                                                  color: AppTheme.textSecondary,
+                                                ),
                                           ),
                                           const SizedBox(height: 4),
                                           Text(
-                                  person == null ? 'Unassigned' : person.name,
+                                            person == null
-                                  style: Theme.of(context).textTheme.labelLarge
+                                                ? 'Unassigned'
-                                      ?.copyWith(color: AppTheme.textSecondary),
+                                                : person.name,
+                                            style: Theme.of(context)
+                                                .textTheme
+                                                .labelLarge
+                                                ?.copyWith(
+                                                  color: AppTheme.textSecondary,
+                                                ),
                                           ),
                                         ],
                                       ),
@@ -95,7 +225,9 @@ class RemindersView extends ConsumerWidget {
                                       value: reminder.enabled,
                                       onChanged: (_) {
                                         ref
-                                  .read(localRepositoryProvider.notifier)
+                                            .read(
+                                              localRepositoryProvider.notifier,
+                                            )
                                             .toggleReminderEnabled(reminder.id);
                                       },
                                     ),
@@ -112,10 +244,14 @@ class RemindersView extends ConsumerWidget {
                                     IconButton(
                                       onPressed: () {
                                         ref
-                                  .read(localRepositoryProvider.notifier)
+                                            .read(
+                                              localRepositoryProvider.notifier,
+                                            )
                                             .deleteReminder(reminder.id);
                                       },
-                            icon: const Icon(Icons.delete_outline_rounded),
+                                      icon: const Icon(
+                                        Icons.delete_outline_rounded,
+                                      ),
                                       tooltip: 'Delete',
                                     ),
                                   ],
@@ -128,6 +264,8 @@ class RemindersView extends ConsumerWidget {
               ),
             );
           },
+        );
+      },
       loading: () => const Center(child: CircularProgressIndicator()),
       error: (Object error, StackTrace stackTrace) {
         return const Center(child: Text('Unable to load reminders'));
@@ -238,9 +376,9 @@ class _ReminderEditorDialogState extends State<_ReminderEditorDialog> {
   Widget build(BuildContext context) {
     return AlertDialog(
       title: Text(widget.title),
-      content: SizedBox(
+      content: SingleChildScrollView(
-        width: 420,
+        child: ConstrainedBox(
-        child: SingleChildScrollView(
+          constraints: const BoxConstraints(maxWidth: 420),
           child: Column(
             mainAxisSize: MainAxisSize.min,
             children: <Widget>[
@@ -291,7 +429,28 @@ class _ReminderEditorDialogState extends State<_ReminderEditorDialog> {
                 decoration: const InputDecoration(labelText: 'Person'),
               ),
               const SizedBox(height: 12),
-              Row(
+              LayoutBuilder(
+                builder: (BuildContext context, BoxConstraints constraints) {
+                  final bool compact = constraints.maxWidth < 360;
+                  if (compact) {
+                    return Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: <Widget>[
+                        Text(
+                          _formatDateTime(_nextAt),
+                          style: Theme.of(context).textTheme.bodyLarge,
+                        ),
+                        const SizedBox(height: 8),
+                        OutlinedButton.icon(
+                          onPressed: _pickDateTime,
+                          icon: const Icon(Icons.schedule_rounded),
+                          label: const Text('Pick Time'),
+                        ),
+                      ],
+                    );
+                  }
+
+                  return Row(
                     children: <Widget>[
                       Expanded(
                         child: Text(
@@ -305,6 +464,8 @@ class _ReminderEditorDialogState extends State<_ReminderEditorDialog> {
                         label: const Text('Pick Time'),
                       ),
                     ],
+                  );
+                },
               ),
             ],
           ),

lib/features/settings/settings_view.dart

@@ -16,18 +16,30 @@ class SettingsView extends ConsumerWidget {
         .asData
         ?.value;
 
+    return LayoutBuilder(
+      builder: (BuildContext context, BoxConstraints constraints) {
+        final bool compact = constraints.maxWidth < 760;
         return Padding(
-      padding: const EdgeInsets.fromLTRB(28, 24, 28, 28),
+          padding: EdgeInsets.fromLTRB(
+            compact ? 16 : 28,
+            compact ? 16 : 24,
+            compact ? 16 : 28,
+            compact ? 20 : 28,
+          ),
+          child: SingleChildScrollView(
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: <Widget>[
-          Text('Settings', style: Theme.of(context).textTheme.headlineMedium),
+                Text(
+                  'Settings',
+                  style: Theme.of(context).textTheme.headlineMedium,
+                ),
                 const SizedBox(height: 6),
                 Text(
                   'Environment and integration configuration for this build.',
-            style: Theme.of(
+                  style: Theme.of(context).textTheme.bodyLarge?.copyWith(
-              context,
+                    color: AppTheme.textSecondary,
-            ).textTheme.bodyLarge?.copyWith(color: AppTheme.textSecondary),
+                  ),
                 ),
                 const SizedBox(height: 16),
                 FrostedCard(
@@ -35,6 +47,7 @@ class SettingsView extends ConsumerWidget {
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: <Widget>[
                       _SettingRow(
+                        compact: compact,
                         label: 'Signed in as',
                         value:
                             session?.user.email ??
@@ -43,20 +56,28 @@ class SettingsView extends ConsumerWidget {
                       ),
                       const SizedBox(height: 12),
                       _SettingRow(
+                        compact: compact,
                         label: 'Gateway mode',
                         value: AppConfig.useFakeBackend
                             ? 'Fake (offline-safe)'
                             : 'REST',
                       ),
                       const SizedBox(height: 12),
-                _SettingRow(label: 'Base URL', value: AppConfig.backendBaseUrl),
+                      _SettingRow(
+                        compact: compact,
+                        label: 'Base URL',
+                        value: AppConfig.backendBaseUrl,
+                      ),
                       const SizedBox(height: 12),
-                const _SettingRow(
+                      _SettingRow(
+                        compact: compact,
                         label: 'Realtime',
                         value: 'Planned later (SSE/WebSocket)',
                       ),
                       const SizedBox(height: 14),
-                Row(
+                      Wrap(
+                        spacing: 8,
+                        runSpacing: 8,
                         children: <Widget>[
                           FilledButton.icon(
                             onPressed: session == null
@@ -65,13 +86,14 @@ class SettingsView extends ConsumerWidget {
                             icon: const Icon(Icons.logout_rounded),
                             label: const Text('Sign Out'),
                           ),
-                    const SizedBox(width: 8),
                           OutlinedButton.icon(
                             onPressed: session == null
                                 ? null
                                 : () {
                                     ref
-                                  .read(sessionControllerProvider.notifier)
+                                        .read(
+                                          sessionControllerProvider.notifier,
+                                        )
                                         .refreshProfile();
                                   },
                             icon: const Icon(Icons.refresh_rounded),
@@ -91,6 +113,9 @@ class SettingsView extends ConsumerWidget {
                 ),
               ],
             ),
+          ),
+        );
+      },
     );
   }
 
@@ -105,13 +130,34 @@ class SettingsView extends ConsumerWidget {
 }
 
 class _SettingRow extends StatelessWidget {
-  const _SettingRow({required this.label, required this.value});
+  const _SettingRow({
+    required this.label,
+    required this.value,
+    required this.compact,
+  });
 
   final String label;
   final String value;
+  final bool compact;
 
   @override
   Widget build(BuildContext context) {
+    if (compact) {
+      return Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: <Widget>[
+          Text(
+            label,
+            style: Theme.of(
+              context,
+            ).textTheme.titleMedium?.copyWith(color: AppTheme.textSecondary),
+          ),
+          const SizedBox(height: 4),
+          Text(value, style: Theme.of(context).textTheme.bodyLarge),
+        ],
+      );
+    }
+
     return Row(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: <Widget>[

lib/features/signals/signals_view.dart

@@ -14,11 +14,45 @@ class SignalsView extends ConsumerWidget {
       signalsControllerProvider,
     );
 
+    return LayoutBuilder(
+      builder: (BuildContext context, BoxConstraints constraints) {
+        final bool compact = constraints.maxWidth < 760;
         return Padding(
-      padding: const EdgeInsets.fromLTRB(28, 24, 28, 28),
+          padding: EdgeInsets.fromLTRB(
+            compact ? 16 : 28,
+            compact ? 16 : 24,
+            compact ? 16 : 28,
+            compact ? 20 : 28,
+          ),
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: <Widget>[
+              if (compact)
+                Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: <Widget>[
+                    Text(
+                      'Signals',
+                      style: Theme.of(context).textTheme.headlineMedium,
+                    ),
+                    const SizedBox(height: 6),
+                    Text(
+                      'Backend-driven recommendations and trends you can act on.',
+                      style: Theme.of(context).textTheme.bodyLarge?.copyWith(
+                        color: AppTheme.textSecondary,
+                      ),
+                    ),
+                    const SizedBox(height: 10),
+                    IconButton.filledTonal(
+                      onPressed: () {
+                        ref.read(signalsControllerProvider.notifier).refresh();
+                      },
+                      icon: const Icon(Icons.refresh_rounded),
+                      tooltip: 'Refresh feed',
+                    ),
+                  ],
+                )
+              else
                 Row(
                   children: <Widget>[
                     Expanded(
@@ -32,9 +66,8 @@ class SignalsView extends ConsumerWidget {
                           const SizedBox(height: 6),
                           Text(
                             'Backend-driven recommendations and trends you can act on.',
-                      style: Theme.of(context).textTheme.bodyLarge?.copyWith(
+                            style: Theme.of(context).textTheme.bodyLarge
-                        color: AppTheme.textSecondary,
+                                ?.copyWith(color: AppTheme.textSecondary),
-                      ),
                           ),
                         ],
                       ),
@@ -78,7 +111,9 @@ class SignalsView extends ConsumerWidget {
                                     ),
                                     child: Text(
                                       item.type.toUpperCase(),
-                                  style: Theme.of(context).textTheme.labelMedium
+                                      style: Theme.of(context)
+                                          .textTheme
+                                          .labelMedium
                                           ?.copyWith(
                                             color: AppTheme.primary,
                                             fontWeight: FontWeight.w700,
@@ -89,7 +124,9 @@ class SignalsView extends ConsumerWidget {
                                   Text(
                                     '${item.createdAt.month}/${item.createdAt.day}',
                                     style: Theme.of(context).textTheme.bodySmall
-                                    ?.copyWith(color: AppTheme.textSecondary),
+                                        ?.copyWith(
+                                          color: AppTheme.textSecondary,
+                                        ),
                                   ),
                                 ],
                               ),
@@ -98,32 +135,45 @@ class SignalsView extends ConsumerWidget {
                                 item.title,
                                 style: Theme.of(context).textTheme.titleLarge,
                               ),
-                          if (item.description case final String description)
+                              if (item.description
+                                  case final String description)
                                 Padding(
                                   padding: const EdgeInsets.only(top: 6),
                                   child: Text(
                                     description,
                                     style: Theme.of(context).textTheme.bodyLarge
-                                    ?.copyWith(color: AppTheme.textSecondary),
+                                        ?.copyWith(
+                                          color: AppTheme.textSecondary,
+                                        ),
                                   ),
                                 ),
                               const SizedBox(height: 14),
-                          Row(
+                              Wrap(
+                                spacing: 8,
+                                runSpacing: 6,
                                 children: <Widget>[
                                   OutlinedButton.icon(
                                     onPressed: () {
                                       ref
-                                      .read(signalsControllerProvider.notifier)
+                                          .read(
-                                      .acknowledge(item.id, SignalAction.saved);
+                                            signalsControllerProvider.notifier,
+                                          )
+                                          .acknowledge(
+                                            item.id,
+                                            SignalAction.saved,
+                                          );
                                     },
-                                icon: const Icon(Icons.bookmark_add_outlined),
+                                    icon: const Icon(
+                                      Icons.bookmark_add_outlined,
+                                    ),
                                     label: const Text('Save'),
                                   ),
-                              const SizedBox(width: 8),
                                   TextButton.icon(
                                     onPressed: () {
                                       ref
-                                      .read(signalsControllerProvider.notifier)
+                                          .read(
+                                            signalsControllerProvider.notifier,
+                                          )
                                           .acknowledge(
                                             item.id,
                                             SignalAction.dismissed,
@@ -148,11 +198,14 @@ class SignalsView extends ConsumerWidget {
                       ),
                     );
                   },
-              loading: () => const Center(child: CircularProgressIndicator()),
+                  loading: () =>
+                      const Center(child: CircularProgressIndicator()),
                 ),
               ),
             ],
           ),
         );
+      },
+    );
   }
 }

lib/features/sync/sync_view.dart

@@ -23,8 +23,16 @@ class _SyncViewState extends ConsumerState<SyncView> {
       syncQueueRepositoryProvider,
     );
 
+    return LayoutBuilder(
+      builder: (BuildContext context, BoxConstraints constraints) {
+        final bool compact = constraints.maxWidth < 760;
         return Padding(
-      padding: const EdgeInsets.fromLTRB(28, 24, 28, 28),
+          padding: EdgeInsets.fromLTRB(
+            compact ? 16 : 28,
+            compact ? 16 : 24,
+            compact ? 16 : 28,
+            compact ? 20 : 28,
+          ),
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: <Widget>[
@@ -39,8 +47,10 @@ class _SyncViewState extends ConsumerState<SyncView> {
               const SizedBox(height: 16),
               Expanded(
                 child: syncState.when(
-              data: (SyncState state) => _buildBody(context, state),
+                  data: (SyncState state) =>
-              loading: () => const Center(child: CircularProgressIndicator()),
+                      _buildBody(context, state, compact),
+                  loading: () =>
+                      const Center(child: CircularProgressIndicator()),
                   error: (Object error, StackTrace stackTrace) {
                     return Center(
                       child: Text(
@@ -56,9 +66,11 @@ class _SyncViewState extends ConsumerState<SyncView> {
             ],
           ),
         );
+      },
+    );
   }
 
-  Widget _buildBody(BuildContext context, SyncState state) {
+  Widget _buildBody(BuildContext context, SyncState state, bool compact) {
     return ListView(
       children: <Widget>[
         FrostedCard(
@@ -111,12 +123,36 @@ class _SyncViewState extends ConsumerState<SyncView> {
                 style: Theme.of(context).textTheme.titleMedium,
               ),
               const SizedBox(height: 10),
-              _infoRow('Pending changes', '${state.pendingChanges.length}'),
+              _infoRow(
-              _infoRow('Cursor', state.cursor ?? 'not set'),
+                label: 'Pending changes',
-              _infoRow('Last sync', _formatDateTime(state.lastSyncAt)),
+                value: '${state.pendingChanges.length}',
-              _infoRow('Last attempt', _formatDateTime(state.lastAttemptAt)),
+                compact: compact,
-              _infoRow('Last rejected count', '${state.lastRejected.length}'),
+              ),
-              _infoRow('Last error', state.lastError ?? 'none'),
+              _infoRow(
+                label: 'Cursor',
+                value: state.cursor ?? 'not set',
+                compact: compact,
+              ),
+              _infoRow(
+                label: 'Last sync',
+                value: _formatDateTime(state.lastSyncAt),
+                compact: compact,
+              ),
+              _infoRow(
+                label: 'Last attempt',
+                value: _formatDateTime(state.lastAttemptAt),
+                compact: compact,
+              ),
+              _infoRow(
+                label: 'Last rejected count',
+                value: '${state.lastRejected.length}',
+                compact: compact,
+              ),
+              _infoRow(
+                label: 'Last error',
+                value: state.lastError ?? 'none',
+                compact: compact,
+              ),
             ],
           ),
         ),
@@ -131,7 +167,30 @@ class _SyncViewState extends ConsumerState<SyncView> {
     );
   }
 
-  Widget _infoRow(String label, String value) {
+  Widget _infoRow({
+    required String label,
+    required String value,
+    required bool compact,
+  }) {
+    if (compact) {
+      return Padding(
+        padding: const EdgeInsets.symmetric(vertical: 4),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: <Widget>[
+            Text(
+              label,
+              style: Theme.of(
+                context,
+              ).textTheme.labelLarge?.copyWith(color: AppTheme.textSecondary),
+            ),
+            const SizedBox(height: 2),
+            Text(value, style: Theme.of(context).textTheme.bodyMedium),
+          ],
+        ),
+      );
+    }
+
     return Padding(
       padding: const EdgeInsets.symmetric(vertical: 2),
       child: Row(