refactor: Simplify layout structure in FeatureManagementModal and improve feature display logic

modules/feature-management/src/Volo.Abp.FeatureManagement.Blazor.MudBlazor/Components/FeatureManagementModal.razor

@@ -22,58 +22,54 @@
                 @foreach (var group in Groups)
                 {
                     <MudTabPanel Text="@group.DisplayName">
-                        <MudGrid>
-                            <MudItem xs="12">
-                                <MudText Typo="Typo.h6">@group.DisplayName</MudText>
-                            </MudItem>
-                            <MudItem xs="12">
-                                @foreach (var feature in group.Features)
-                                {
-                                    var disabled = IsDisabled(feature);
-                                    <div style="@GetFeatureStyles(feature)">
-                                        @if (feature.ValueType is FreeTextStringValueType)
+                        <MudStack Spacing="2">
+                            <MudText Typo="Typo.h6">@group.DisplayName</MudText>
+                            @foreach (var feature in group.Features)
+                            {
+                                var disabled = IsDisabled(feature);
+                                <div style="@GetFeatureStyles(feature)">
+                                    @if (feature.ValueType is FreeTextStringValueType)
+                                    {
+                                        <MudTextField Label="@GetShownName(feature)" Disabled="@disabled" Value="@feature.Value"
+                                            ValueChanged="@(async ([CanBeNull] string v) => await OnFeatureValueChangedAsync(v, feature))" />
+                                        @if (feature.Description != null)
                                         {
-                                            <MudTextField Label="@GetShownName(feature)" Disabled="@disabled" Value="@feature.Value"
-                                                ValueChanged="@(async ([CanBeNull] string v) => await OnFeatureValueChangedAsync(v, feature))" />
-                                            @if (feature.Description != null)
-                                            {
-                                                <MudText Typo="Typo.caption" Class="mt-1">@feature.Description</MudText>
-                                            }
+                                            <MudText Typo="Typo.caption" Class="mt-1">@feature.Description</MudText>
                                         }
+                                    }
 
-                                        @if (feature.ValueType is SelectionStringValueType)
-                                        {
-                                            var items = ((SelectionStringValueType)feature.ValueType).ItemSource.Items;
-                                            var selectedValue = SelectionStringValues[feature.Name];
-                                            <MudSelect T="string" Label="@GetShownName(feature)" Disabled="@disabled"
-                                                Value="@selectedValue" ValueChanged="@(s => SelectionStringValues[feature.Name] = s)">
-                                                @foreach (var item in items)
-                                                {
-                                                    <MudSelectItem Value="@item.Value">
-                                                        @CreateStringLocalizer(item.DisplayText.ResourceName).GetString(item.DisplayText.Name)
-                                                    </MudSelectItem>
-                                                }
-                                            </MudSelect>
-                                            @if (feature.Description != null)
+                                    @if (feature.ValueType is SelectionStringValueType)
+                                    {
+                                        var items = ((SelectionStringValueType)feature.ValueType).ItemSource.Items;
+                                        var selectedValue = SelectionStringValues[feature.Name];
+                                        <MudSelect T="string" Label="@GetShownName(feature)" Disabled="@disabled"
+                                            Value="@selectedValue" ValueChanged="@(s => SelectionStringValues[feature.Name] = s)">
+                                            @foreach (var item in items)
                                             {
-                                                <MudText Typo="Typo.caption" Class="mt-1">@feature.Description</MudText>
+                                                <MudSelectItem Value="@item.Value">
+                                                    @CreateStringLocalizer(item.DisplayText.ResourceName).GetString(item.DisplayText.Name)
+                                                </MudSelectItem>
                                             }
+                                        </MudSelect>
+                                        @if (feature.Description != null)
+                                        {
+                                            <MudText Typo="Typo.caption" Class="mt-1">@feature.Description</MudText>
                                         }
+                                    }
 
-                                        @if (feature.ValueType is ToggleStringValueType)
+                                    @if (feature.ValueType is ToggleStringValueType)
+                                    {
+                                        <MudCheckBox Disabled="@disabled" Value="@ToggleValues[feature.Name]"
+                                            ValueChanged="@(async (bool v) => await OnSelectedValueChangedAsync(v, feature))"
+                                            Label="@GetShownName(feature)" />
+                                        @if (feature.Description != null)
                                         {
-                                            <MudCheckBox Disabled="@disabled" Value="@ToggleValues[feature.Name]"
-                                                ValueChanged="@(async (bool v) => await OnSelectedValueChangedAsync(v, feature))"
-                                                Label="@GetShownName(feature)" />
-                                            @if (feature.Description != null)
-                                            {
-                                                <MudText Typo="Typo.caption" Class="mt-1">@feature.Description</MudText>
-                                            }
+                                            <MudText Typo="Typo.caption" Class="mt-1">@feature.Description</MudText>
                                         }
-                                    </div>
-                                }
-                            </MudItem>
-                        </MudGrid>
+                                    }
+                                </div>
+                            }
+                        </MudStack>
                     </MudTabPanel>
                 }
             </MudTabs>