Refactor career mapping display to enhance layout and styling

This commit updates the CareerMapping.razor component by wrapping the career display in a new div with a class for improved styling. The MudStack component's WrapItems property has been changed to Wrap, enhancing the layout of related careers. These changes aim to improve the visual presentation and maintainability of the career mapping feature.
2026-01-10 19:04:54 -05:00
parent 45edcf5e5f
commit e77f34ff9f
1 changed files with 8 additions and 6 deletions
@@ -49,12 +49,14 @@ else
                @if (_selectedNodeInfo.Careers != null && _selectedNodeInfo.Careers.Any())
                {
                    <MudText Typo="Typo.subtitle2" Class="mb-2">Related Careers:</MudText>
-                    <MudStack Row="true" Spacing="1" WrapItems="true">
-                        @foreach (var career in _selectedNodeInfo.Careers.OrderBy(c => c))
-                        {
-                            <MudChip T="string" Size="Size.Small" Variant="Variant.Filled" Color="Color.Default">@career</MudChip>
-                        }
-                    </MudStack>
+                    <div class="career-mapping">
+                        <MudStack Row="true" Spacing="1" Wrap="Wrap.Wrap">
+                            @foreach (var career in _selectedNodeInfo.Careers.OrderBy(c => c))
+                            {
+                                <MudChip T="string" Size="Size.Small" Variant="Variant.Filled" Color="Color.Default">@career</MudChip>
+                            }
+                        </MudStack>
+                    </div>
                }
            </MudPaper>
        }