Move module settings beside the FFB graph and auto-fit the track map

The selected node's settings now stack in a scrollable column to the right of the node graph, the track map fills the bottom-right panel and scales to fit it, the effect-disabled notice moved below the node name, and the corner toolbars got opaque background plates.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: mherbold

MarvinsAIRARefactored/Controls/FFBGraphEditor.xaml

@@ -19,12 +19,13 @@
         <converters:BooleanToVisibilityCollapsedConverter x:Key="BoolToVisibilityCollapsed" />
     </UserControl.Resources>
 
-    <!-- Rounded on top only and no bottom border: the preview graph sits flush underneath (its top border is
+    <!-- Rounded on the upper left only, no bottom border: the module settings column sits flush on the right
+		     (this box's right border is that divider) and the preview graph sits flush underneath (its top border is
 	     the 2px divider between them), so the two boxes read as one view. -->
     <Border BorderThickness="2,2,2,0"
             BorderBrush="{DynamicResource Brush.Border.Normal}"
             Background="{DynamicResource Brush.Background.Popup}"
-            CornerRadius="5,5,0,0"
+            CornerRadius="5,0,0,0"
             ClipToBounds="True">
 
         <Grid>
@@ -262,36 +263,44 @@
 
             <!-- canvas tools (pinned to the corner, outside the panned canvas): add module + remove selected module
 			     + snap-to-grid toggle + auto layout -->
-            <StackPanel Orientation="Horizontal"
-                        HorizontalAlignment="Right"
-                        VerticalAlignment="Top"
-                        Margin="0,8,8,0"
-                        Panel.ZIndex="1">
-
-                <local:MairaButton x:Name="AddModule_MairaButton"
-                                   Icon="/MarvinsAIRARefactored;component/Artwork/Buttons/plus.png"
-                                   IsSmall="True"
-                                   Click="AddModule_MairaButton_Click" />
-
-                <local:MairaButton x:Name="RemoveModule_MairaButton"
-                                   Icon="/MarvinsAIRARefactored;component/Artwork/Buttons/minus.png"
-                                   IsSmall="True"
-                                   Margin="8,0,0,0"
-                                   Click="RemoveModule_MairaButton_Click" />
-
-                <local:MairaButton x:Name="SnapToGrid_MairaButton"
-                                   Icon="/MarvinsAIRARefactored;component/Artwork/Buttons/grid.png"
-                                   IsSmall="True"
-                                   Margin="8,0,0,0"
-                                   Click="SnapToGrid_MairaButton_Click" />
-
-                <local:MairaButton x:Name="AutoLayout_MairaButton"
-                                   Icon="/MarvinsAIRARefactored;component/Artwork/Buttons/wand.png"
-                                   IsSmall="True"
-                                   Margin="8,0,0,0"
-                                   Click="AutoLayout_MairaButton_Click" />
-
-            </StackPanel>
+            <Border HorizontalAlignment="Right"
+                    VerticalAlignment="Top"
+                    Margin="0,8,8,0"
+                    Panel.ZIndex="1"
+                    Background="{DynamicResource Brush.Background.Default}"
+                    CornerRadius="20"
+                    Padding="6">
+
+                <!-- the rounded plate above is opaque (page background color) so the buttons stay readable
+					     over whatever nodes are underneath -->
+                <StackPanel Orientation="Horizontal">
+
+                    <local:MairaButton x:Name="AddModule_MairaButton"
+                                       Icon="/MarvinsAIRARefactored;component/Artwork/Buttons/plus.png"
+                                       IsSmall="True"
+                                       Click="AddModule_MairaButton_Click" />
+
+                    <local:MairaButton x:Name="RemoveModule_MairaButton"
+                                       Icon="/MarvinsAIRARefactored;component/Artwork/Buttons/minus.png"
+                                       IsSmall="True"
+                                       Margin="8,0,0,0"
+                                       Click="RemoveModule_MairaButton_Click" />
+
+                    <local:MairaButton x:Name="SnapToGrid_MairaButton"
+                                       Icon="/MarvinsAIRARefactored;component/Artwork/Buttons/grid.png"
+                                       IsSmall="True"
+                                       Margin="8,0,0,0"
+                                       Click="SnapToGrid_MairaButton_Click" />
+
+                    <local:MairaButton x:Name="AutoLayout_MairaButton"
+                                       Icon="/MarvinsAIRARefactored;component/Artwork/Buttons/wand.png"
+                                       IsSmall="True"
+                                       Margin="8,0,0,0"
+                                       Click="AutoLayout_MairaButton_Click" />
+
+                </StackPanel>
+
+            </Border>
 
         </Grid>
 

MarvinsAIRARefactored/FFB/FFBGraphViewModels.cs

@@ -427,14 +427,16 @@ public bool IsTestActive
 	public bool ShowInputA => _descriptor.SignalInputCount >= 1;
 	public bool ShowInputB => _descriptor.SignalInputCount >= 2;
 
-	// the settings card's UniformGrid in RacingWheelPage.xaml consumes this via x:Static, so the BreakRow
-	// spacer math here and the rendered column count always agree
+	// column count for the multi-column settings-card presentation (the BreakRow spacer math below pads to
+	// this). RacingWheelPage.xaml currently stacks the settings vertically and binds Settings directly, so
+	// SettingsPresentation is unused there — kept in case the layout returns to a grid.
 	public const int SettingsPanelColumns = 3;
 
 	public ObservableCollection<FFBModuleSettingViewModel> Settings { get; } = [];
 
-	/// <summary>What the settings panel actually renders: <see cref="Settings"/> plus invisible spacers padding
-	/// out the row before each BreakRow setting, so related settings can be grouped onto their own row.</summary>
+	/// <summary>The multi-column presentation of the settings: <see cref="Settings"/> plus invisible spacers
+	/// padding out the row before each BreakRow setting, so related settings can be grouped onto their own
+	/// row. Unused while the settings panel stacks vertically.</summary>
 	public ObservableCollection<object> SettingsPresentation { get; } = [];
 
 	public string DisplayName