Inject menu padding into the detail views so they can have their backgrounds overlap with the nav-rail and its curved corner.

lib/ui/screens/artifact/artifact_carousel/artifact_carousel_screen.dart

@@ -12,8 +12,9 @@ part 'widgets/_bottom_text_content.dart';
 part 'widgets/_collapsing_carousel_item.dart';
 
 class ArtifactCarouselScreen extends StatefulWidget {
+  const ArtifactCarouselScreen({Key? key, required this.type, this.contentPadding = EdgeInsets.zero}) : super(key: key);
   final WonderType type;
-  const ArtifactCarouselScreen({Key? key, required this.type}) : super(key: key);
+  final EdgeInsets contentPadding;
 
   @override
   State<ArtifactCarouselScreen> createState() => _ArtifactScreenState();
@@ -82,6 +83,10 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
               }),
         ),
 
+        Padding(
+            padding: widget.contentPadding,
+            child: Stack(
+              children: [
                 /// BgCircle
                 _buildBgCircle(bottomHeight),
 
@@ -132,6 +137,8 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
                   ),
                 ),
               ],
+            ))
+      ],
     );
   }
 

lib/ui/screens/editorial/editorial_screen.dart

@@ -38,9 +38,11 @@ part 'widgets/_title_text.dart';
 part 'widgets/_top_illustration.dart';
 
 class WonderEditorialScreen extends StatefulWidget {
-  const WonderEditorialScreen(this.data, {Key? key, required this.onScroll}) : super(key: key);
+  const WonderEditorialScreen(this.data, {Key? key, required this.onScroll, required this.contentPadding})
+      : super(key: key);
   final WonderData data;
   final void Function(double scrollPos) onScroll;
+  final EdgeInsets contentPadding;
 
   @override
   State<WonderEditorialScreen> createState() => _WonderEditorialScreenState();
@@ -95,12 +97,20 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
                     return Opacity(opacity: opacity, child: child);
                   },
                   // This is due to a bug: https://github.com/flutter/flutter/issues/101872
-                  child: RepaintBoundary(child: _TopIllustration(widget.data.type)),
+                  child: RepaintBoundary(
+                      child: _TopIllustration(
+                    widget.data.type,
+                    // Polish: Inject the content padding into the illustration as an offset, so it can center itself relative to the content
+                    // this allows the background to extend underneath the vertical side nav when it has rounded corners.
+                    fgOffset: Offset(widget.contentPadding.left / 2, 0),
+                  )),
                 ),
               ),
 
               /// Scrolling content - Includes an invisible gap at the top, and then scrolls over the illustration
               TopCenter(
+                child: Padding(
+                  padding: widget.contentPadding,
                   child: SizedBox(
                     child: FocusTraversalGroup(
                       child: CustomScrollView(
@@ -155,6 +165,7 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
                     ),
                   ),
                 ),
+              ),
 
               /// Home Btn
               AnimatedBuilder(

lib/ui/screens/editorial/widgets/_top_illustration.dart

@@ -1,8 +1,9 @@
 part of '../editorial_screen.dart';
 
 class _TopIllustration extends StatelessWidget {
-  const _TopIllustration(this.type, {Key? key}) : super(key: key);
+  const _TopIllustration(this.type, {Key? key, this.fgOffset = Offset.zero}) : super(key: key);
   final WonderType type;
+  final Offset fgOffset;
 
   @override
   Widget build(BuildContext context) {
@@ -11,7 +12,7 @@ class _TopIllustration extends StatelessWidget {
         WonderIllustration(type, config: WonderIllustrationConfig.bg(enableAnims: false, shortMode: true)),
         Transform.translate(
           // Small bump down to make sure we cover the edge between the editorial page and the sky.
-          offset: Offset(0, 10),
+          offset: fgOffset + Offset(0, 10),
           child: WonderIllustration(
             type,
             config: WonderIllustrationConfig.mg(enableAnims: false, shortMode: true),

lib/ui/screens/wonder_details/wonder_details_tab_menu.dart

@@ -36,7 +36,12 @@ class WonderDetailsTabMenu extends StatelessWidget {
                 top: isVertical ? context.mq.viewPadding.top : buttonInset,
                 right: isVertical ? buttonInset : 0,
               ),
-              child: ColoredBox(color: $styles.colors.offWhite),
+              child: Container(
+                decoration: BoxDecoration(
+                  color: $styles.colors.offWhite,
+                  borderRadius: isVertical ? BorderRadius.only(topRight: Radius.circular(32)) : null,
+                ),
+              ),
             ),
           ),
         ),

lib/ui/screens/wonder_details/wonders_details_screen.dart

@@ -57,7 +57,6 @@ class _WonderDetailsScreenState extends State<WonderDetailsScreen>
     bool showTabBarBg = tabIndex != 1;
     final tabBarSize = _tabBarSize ?? 0;
     final menuPadding = _useNavRail ? EdgeInsets.only(left: tabBarSize) : EdgeInsets.only(bottom: tabBarSize);
-
     return ColoredBox(
       color: Colors.black,
       child: Stack(
@@ -66,19 +65,10 @@ class _WonderDetailsScreenState extends State<WonderDetailsScreen>
           LazyIndexedStack(
             index: _tabController.index,
             children: [
-              Padding(
+              WonderEditorialScreen(wonder, contentPadding: menuPadding, onScroll: _handleDetailsScrolled),
-                padding: menuPadding,
-                child: WonderEditorialScreen(wonder, onScroll: _handleDetailsScrolled),
-              ),
               PhotoGallery(collectionId: wonder.unsplashCollectionId, wonderType: wonder.type),
-              Padding(
+              ArtifactCarouselScreen(type: wonder.type, contentPadding: menuPadding),
-                padding: menuPadding,
+              WonderEvents(type: widget.type, contentPadding: menuPadding),
-                child: ArtifactCarouselScreen(type: wonder.type),
-              ),
-              Padding(
-                padding: menuPadding,
-                child: WonderEvents(type: widget.type),
-              ),
             ],
           ),
 

lib/ui/screens/wonder_events/wonder_events.dart

@@ -19,9 +19,9 @@ part 'widgets/_timeline_btn.dart';
 part 'widgets/_wonder_image_with_timeline.dart';
 
 class WonderEvents extends StatefulWidget {
-  const WonderEvents({Key? key, required this.type}) : super(key: key);
+  const WonderEvents({Key? key, required this.type, this.contentPadding = EdgeInsets.zero}) : super(key: key);
   final WonderType type;
-
+  final EdgeInsets contentPadding;
   @override
   State<WonderEvents> createState() => _WonderEventsState();
 }
@@ -51,8 +51,11 @@ class _WonderEventsState extends State<WonderEvents> {
               /// Main view
               Positioned.fill(
                 top: $styles.insets.sm,
+                child: Padding(
+                  padding: widget.contentPadding,
                   child: useTwoColumnLayout ? _buildTwoColumn(context) : _buildSingleColumn(),
                 ),
+              ),
 
               /// Header w/ TimelineBtn
               TopCenter(