MudExpansionPanel: Fix Gutters property not affecting header padding

[Copilot]

The Gutters property on MudExpansionPanel only controlled content padding, not header padding. Setting Gutters="false" left the header with fixed 24px horizontal padding.

<!-- Before: header still had 24px padding -->
<MudExpansionPanel Text="Title" Gutters="false">
    Content
</MudExpansionPanel>

<!-- After: both header and content respect Gutters -->
<MudExpansionPanel Text="Title" Gutters="false">
    Content  <!-- Now both have 0px horizontal padding -->
</MudExpansionPanel>

Changes

SCSS (_expansionpanel.scss)

• Changed .mud-expand-panel-header base padding from 16px 24px to 16px 0px
• Added .mud-expand-panel-header-gutters modifier that applies padding-left: 24px; padding-right: 24px

C# (MudExpansionPanel.razor.cs)

• Applied gutters class to header using same logic as content: Gutters && Parent?.Gutters != false

Tests

• Added 3 test scenarios: Gutters=true, Gutters=false, and parent override

Documentation (ExpansionPanelPaddingExample.razor)

• Enhanced the Padding example to clearly showcase all Gutters behaviors with descriptive sections:
  • Default Gutters=true behavior
  • No Gutters (Gutters=false) - highlighting the fix
  • Dense panel variations with and without gutters
  • Parent-level Gutters inheritance

Default behavior (Gutters=true) unchanged - only fixes the broken Gutters=false case.

• Fixes MudExpansionPanel Gutters property has no effect when set to false #10907

Original prompt

---

This section details on the original issue you should resolve

<issue_title>MudExpansionPanel Gutters property has no effect when set to false</issue_title>
<issue_description>### Things to check

• I have searched the existing issues for this bug
• To rule out a caching problem I made sure the bug also happens in an incognito tab

Bug type

Component

Component name

MudExpansionPanel

What happened?

Gutters on MudExpansionPanel do not work when set to false, it keeps padding from left and right.

Expected behavior

Gutters when set to false to remove padding from left and right

Reproduction link

https://try.mudblazor.com/snippet/mkwpEclNpxnzWPvt

Reproduction steps

/

Relevant log output

Version (bug)

8.2.0

Version (working)

6.x.x

What browsers are you seeing the problem on?

Edge

On which operating systems are you experiencing the issue?

Windows

Pull Request

• I would like to do a Pull Request

Code of Conduct

• I agree to follow this project's Code of Conduct</issue_description>

<agent_instructions>Make the behavior consistent and expected according to the docs or other sources</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes MudExpansionPanel Gutters property has no effect when set to false #10907

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[danielchalmers]

@copilot Update the Padding example in the docs to showcase this

[Copilot]

@copilot Update the Padding example in the docs to showcase this

Updated the Padding example with clear sections demonstrating:

• Default Gutters=true behavior
• Gutters=false (highlighting the fix)
• Dense panel variations
• Parent-level Gutters inheritance

Commit: f161428

The example now clearly shows how both header and content respect the Gutters property, with a highlighted section explaining the fix.

[danielchalmers]

Before (https://try.mudblazor.com/snippet/wkwplbEcTqqWygpF)

After (docs on this build)

[icistrate]

@danielchalmers
Something looks to be strange here. I have no Gutters set anywhere (which should imply they are true by default), so horizontal padding should be applied to the header, but I cannot see it applied. I see it applied to the content though.

Razor code:

<MudExpansionPanels Class="mt-4" MultiExpansion="true" Elevation="1">
    @foreach (var group in ...)
    {
        <MudExpansionPanel Class="mb-2" Expanded="true" HideIcon="true">
            <TitleContent>
               <MudText Typo="Typo.h5" Color="Color.Secondary">@group.GroupName</MudText>
            </TitleContent>
            <ChildContent>
                  ...
            </ChildContent>
        </MudExpansionPanel>
     }
</MudExpansionPanels>

Picture when inspecting header:

Picture when inspecting content:

[danielchalmers]

@icistrate Thanks for the heads up! Would you be able to create an issue for this with reproduction and ping me so I can take a further look?

[icistrate]

@danielchalmers Thanks for the message. Very strange, I started to extract it into a simpler example and now I see correct behaviour. So, I guess it is something with the whole setup in my application. I cannot seem to figure it out for the moment. If I manage to reproduce outside, I will create an issue. Thanks again