diff --git a/CHANGELOG.md b/CHANGELOG.md index 130438c..387054f 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/lib/src/configuration/magic_starter_theme.dart b/lib/src/configuration/magic_starter_theme.dart index 4604b66..123bcfb 100644 --- a/lib/src/configuration/magic_starter_theme.dart +++ b/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', }); } diff --git a/test/configuration/magic_starter_theme_test.dart b/test/configuration/magic_starter_theme_test.dart index bbc8c22..211fbe4 100644 --- a/test/configuration/magic_starter_theme_test.dart +++ b/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(); diff --git a/test/magic_starter_manager_test.dart b/test/magic_starter_manager_test.dart index 67d35af..dc0a9b6 100644 --- a/test/magic_starter_manager_test.dart +++ b/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); });