Fix base design size (#433)

* fix base design size

* docs: update changelog

* chore: add widgetbook inspector addon

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

lib/main.dart

@@ -126,7 +126,7 @@ class _WnAppState extends ConsumerState<WnApp> {
     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',

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();
 

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';

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]),

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,

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),

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),

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();
 

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(

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,