fix(page-header): use line-clamp-2 default to prevent mobile title truncation

CHANGELOG.md

@@ -6,6 +6,7 @@ All notable changes to this project will be documented in this file.
 
 ### 🐛 Bug Fixes
 - **Mobile Header Brand**: `MagicStarterAppLayout` mobile topbar now honors `navigationTheme.brandBuilder`, so custom brand widgets render consistently across breakpoints when provided ([#65](https://github.com/fluttersdk/magic_starter/issues/65))
+- **Page Header Title Truncation**: `MagicStarterPageHeaderTheme` defaults now use `line-clamp-2` instead of `truncate` for `titleClassName` and `subtitleClassName`, so long titles wrap to a second line on narrow viewports (e.g. iPhone-width screens) instead of clipping to "AI sett..." ([#67](https://github.com/fluttersdk/magic_starter/issues/67))
 
 ## [0.0.1-alpha.14] - 2026-04-16
 

lib/src/configuration/magic_starter_theme.dart

@@ -399,12 +399,14 @@ class MagicStarterPageHeaderTheme {
 
   /// Title text className.
   ///
-  /// Defaults to `'text-2xl font-bold text-gray-900 dark:text-white truncate'`.
+  /// Defaults to `'text-2xl font-bold text-gray-900 dark:text-white line-clamp-2'`.
+  /// Uses `line-clamp-2` instead of `truncate` so long titles wrap to a second
+  /// line on narrow viewports (e.g. iPhone-width screens) instead of clipping.
   final String titleClassName;
 
   /// Subtitle text className.
   ///
-  /// Defaults to `'text-sm text-gray-600 dark:text-gray-400 truncate'`.
+  /// Defaults to `'text-sm text-gray-600 dark:text-gray-400 line-clamp-2'`.
   final String subtitleClassName;
 
   /// Action buttons container className.
@@ -418,9 +420,9 @@ class MagicStarterPageHeaderTheme {
     this.containerInlineClassName =
         'w-full flex flex-row items-center justify-between gap-4 p-2 lg:p-4 border-b border-gray-200 dark:border-gray-700',
     this.titleClassName =
-        'text-2xl font-bold text-gray-900 dark:text-white truncate',
+        'text-2xl font-bold text-gray-900 dark:text-white line-clamp-2',
     this.subtitleClassName =
-        'text-sm text-gray-600 dark:text-gray-400 truncate',
+        'text-sm text-gray-600 dark:text-gray-400 line-clamp-2',
     this.actionContainerClassName = 'flex flex-row items-center gap-2',
   });
 }

test/configuration/magic_starter_theme_test.dart

@@ -204,6 +204,20 @@ void main() {
         expect(theme.subtitleClassName, contains('text-sm'));
       });
 
+      test('titleClassName uses line-clamp-2 instead of truncate', () {
+        const theme = MagicStarterPageHeaderTheme();
+
+        expect(theme.titleClassName, contains('line-clamp-2'));
+        expect(theme.titleClassName, isNot(contains('truncate')));
+      });
+
+      test('subtitleClassName uses line-clamp-2 instead of truncate', () {
+        const theme = MagicStarterPageHeaderTheme();
+
+        expect(theme.subtitleClassName, contains('line-clamp-2'));
+        expect(theme.subtitleClassName, isNot(contains('truncate')));
+      });
+
       test('containerClassName contains border-b', () {
         const theme = MagicStarterPageHeaderTheme();
 

test/magic_starter_manager_test.dart

@@ -115,7 +115,7 @@ void main() {
         );
         expect(
           manager.pageHeaderTheme.titleClassName,
-          'text-2xl font-bold text-gray-900 dark:text-white truncate',
+          'text-2xl font-bold text-gray-900 dark:text-white line-clamp-2',
         );
         expect(manager.layoutTheme.sidebarWidth, 256);
       });