From 239ef9b4daaf42cc9c878b1944bd0c7f4e966e6a Mon Sep 17 00:00:00 2001 From: Pepi Date: Wed, 4 Mar 2026 11:23:06 -0300 Subject: [PATCH] Fix base design size (#433) * fix base design size * docs: update changelog * chore: add widgetbook inspector addon --- CHANGELOG.md | 2 +- lib/main.dart | 2 +- test/screens/chat_raw_debug_screen_test.dart | 2 ++ test/test_helpers.dart | 4 +++- test/theme/app_typography_test.dart | 3 ++- test/theme_test.dart | 5 +++-- test/widgets/chat_message_bubble_test.dart | 4 ++-- test/widgets/wn_message_bubble_test.dart | 4 ++-- test/widgets/wn_onboarding_carousel_test.dart | 2 +- test/widgets/wn_tooltip_test.dart | 16 ++++++++-------- widgetbook/lib/main.dart | 3 ++- 11 files changed, 27 insertions(+), 20 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ea2f0ec..ce4978f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,7 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Added missing error translations for relay urls [PR #396](https://github.com/marmot-protocol/whitenoise/pull/396) - Fix positioning of error notice in chat screen [PR #409](https://github.com/marmot-protocol/whitenoise/pull/409) - Fix bio field looking cut in signup form by adding automatic scroll [PR #435](https://github.com/marmot-protocol/whitenoise/pull/435) - +- Fix base design size [#433](https://github.com/marmot-protocol/whitenoise/pull/433) ### Security ## [0.3.0] - 2026-02-23 diff --git a/lib/main.dart b/lib/main.dart index ecfcfda..8f52eeb 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -126,7 +126,7 @@ class _WnAppState extends ConsumerState { final locale = ref.read(localeProvider.notifier).resolveLocale(); return ScreenUtilInit( - designSize: const Size(390, 844), + designSize: const Size(420, 912), builder: (context, child) { return MaterialApp.router( title: 'White Noise', diff --git a/test/screens/chat_raw_debug_screen_test.dart b/test/screens/chat_raw_debug_screen_test.dart index b63c5c8..7cae968 100644 --- a/test/screens/chat_raw_debug_screen_test.dart +++ b/test/screens/chat_raw_debug_screen_test.dart @@ -585,6 +585,8 @@ void main() { ); final copyButtons = find.text('Copy'); + await tester.ensureVisible(copyButtons.last); + await tester.pumpAndSettle(); await tester.tap(copyButtons.last); await tester.pumpAndSettle(); diff --git a/test/test_helpers.dart b/test/test_helpers.dart index 6df9053..08998d9 100644 --- a/test/test_helpers.dart +++ b/test/test_helpers.dart @@ -11,7 +11,9 @@ import 'package:flutter_test/flutter_test.dart' import 'package:whitenoise/l10n/generated/app_localizations.dart'; import 'package:whitenoise/routes.dart'; -const testDesignSize = Size(390, 844); +const double testDesignWidth = 420; +const double testDesignHeight = 912; +const testDesignSize = Size(testDesignWidth, testDesignHeight); const testPubkeyA = 'a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4'; const testNpubA = 'npub1a1b2c31111111111111111111111111111111111111111111111111111'; diff --git a/test/theme/app_typography_test.dart b/test/theme/app_typography_test.dart index a41b6a7..27a3a7d 100644 --- a/test/theme/app_typography_test.dart +++ b/test/theme/app_typography_test.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:whitenoise/theme/app_typography.dart'; +import '../test_helpers.dart'; void main() { group('AppTypography', () { @@ -296,7 +297,7 @@ void main() { await tester.pumpWidget( ScreenUtilInit( - designSize: const Size(390, 844), + designSize: testDesignSize, builder: (context, child) { return MaterialApp( theme: ThemeData(extensions: const [AppTypography.instance]), diff --git a/test/theme_test.dart b/test/theme_test.dart index 52bb786..466775f 100644 --- a/test/theme_test.dart +++ b/test/theme_test.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:whitenoise/theme.dart'; +import 'test_helpers.dart'; void main() { group('lightTheme', () { @@ -363,7 +364,7 @@ void main() { await tester.pumpWidget( ScreenUtilInit( - designSize: const Size(390, 844), + designSize: testDesignSize, builder: (context, child) { return MaterialApp( theme: lightTheme, @@ -389,7 +390,7 @@ void main() { await tester.pumpWidget( ScreenUtilInit( - designSize: const Size(390, 844), + designSize: testDesignSize, builder: (context, child) { return MaterialApp( theme: darkTheme, diff --git a/test/widgets/chat_message_bubble_test.dart b/test/widgets/chat_message_bubble_test.dart index d1d7aa9..d137b0b 100644 --- a/test/widgets/chat_message_bubble_test.dart +++ b/test/widgets/chat_message_bubble_test.dart @@ -292,8 +292,8 @@ void main() { }); group('max bubble width', () { - // Viewport = 390px, column = viewport − 20px = 370px, max = 80% of 370 = 296px. - const expectedMaxWidth = (390 - 20) * 0.8; + // Viewport = 420px (testDesignWidth), column = viewport − 20px = 400px, max = 80% of 400 = 320px. + const expectedMaxWidth = (testDesignWidth - 20) * 0.8; Finder findBubbleConstrainedBox() => find.descendant( of: find.byType(WnMessageBubble), diff --git a/test/widgets/wn_message_bubble_test.dart b/test/widgets/wn_message_bubble_test.dart index bd96972..8542ade 100644 --- a/test/widgets/wn_message_bubble_test.dart +++ b/test/widgets/wn_message_bubble_test.dart @@ -350,8 +350,8 @@ void main() { }); group('max bubble width', () { - // Viewport = 390px, column = viewport − 20px = 370px, max = 80% of 370 = 296px. - const expectedMaxWidth = (390 - 20) * 0.8; + // Viewport = 420px (testDesignWidth), column = viewport − 20px = 400px, max = 80% of 400 = 320px. + const expectedMaxWidth = (testDesignWidth - 20) * 0.8; Finder findBubbleConstrainedBox() => find.descendant( of: find.byType(WnMessageBubble), diff --git a/test/widgets/wn_onboarding_carousel_test.dart b/test/widgets/wn_onboarding_carousel_test.dart index f919b8c..43b7083 100644 --- a/test/widgets/wn_onboarding_carousel_test.dart +++ b/test/widgets/wn_onboarding_carousel_test.dart @@ -93,7 +93,7 @@ void main() { await tester.drag( find.byKey(const Key('login_carousel_page_view')), - const Offset(400, 0), + const Offset(testDesignWidth, 0), ); await tester.pumpAndSettle(); diff --git a/test/widgets/wn_tooltip_test.dart b/test/widgets/wn_tooltip_test.dart index 7a2b709..9fdca08 100644 --- a/test/widgets/wn_tooltip_test.dart +++ b/test/widgets/wn_tooltip_test.dart @@ -4,7 +4,7 @@ import 'package:flutter/material.dart' import 'package:flutter_test/flutter_test.dart'; import 'package:whitenoise/widgets/wn_tooltip.dart' show ArrowPainter, WnTooltip, WnTooltipPosition, WnTooltipTriggerMode; -import '../test_helpers.dart' show mountWidget, setUpTestView, testDesignSize; +import '../test_helpers.dart'; void main() { group('WnTooltip tests', () { @@ -589,8 +589,8 @@ void main() { setUpTestView(tester); final widget = const Scaffold( body: SizedBox( - width: 400, - height: 400, + width: testDesignWidth, + height: testDesignHeight, child: Align( alignment: Alignment.centerLeft, child: WnTooltip( @@ -617,8 +617,8 @@ void main() { setUpTestView(tester); final widget = const Scaffold( body: SizedBox( - width: 400, - height: 400, + width: testDesignWidth, + height: testDesignHeight, child: Align( alignment: Alignment.centerRight, child: WnTooltip( @@ -636,7 +636,7 @@ void main() { expect(tooltipContent, findsOneWidget); final tooltipBox = tester.getRect(tooltipContent); - expect(tooltipBox.right, lessThanOrEqualTo(400)); + expect(tooltipBox.right, lessThanOrEqualTo(testDesignWidth)); }); testWidgets('arrow remains pointing at target when tooltip shifts', ( @@ -645,8 +645,8 @@ void main() { setUpTestView(tester); final widget = const Scaffold( body: SizedBox( - width: 400, - height: 400, + width: 420, + height: 420, child: Align( alignment: Alignment.centerLeft, child: WnTooltip( diff --git a/widgetbook/lib/main.dart b/widgetbook/lib/main.dart index 713c13a..85b6622 100644 --- a/widgetbook/lib/main.dart +++ b/widgetbook/lib/main.dart @@ -21,6 +21,7 @@ class WidgetbookApp extends StatelessWidget { return Widgetbook.material( initialRoute: '?path=introduction/resources', addons: [ + InspectorAddon(), ThemeAddon( themes: [ WidgetbookTheme(name: 'Light', data: lightTheme), @@ -28,7 +29,7 @@ class WidgetbookApp extends StatelessWidget { ], themeBuilder: (context, theme, child) { return ScreenUtilInit( - designSize: const Size(390, 844), + designSize: const Size(420, 912), minTextAdapt: true, enableScaleWH: () => false, enableScaleText: () => false,