From c68c97da0a2a339a499889d17bbd0d4a9542130d Mon Sep 17 00:00:00 2001 From: maliming Date: Tue, 12 May 2026 16:11:31 +0800 Subject: [PATCH] Add horizontal gap to vertical MudTabs between tabbar and panels MudBlazor 9 renders mud-tabs-vertical with the tabbar flush against the panels container, making the active tab indicator visually touch the panel content. Add 16px padding-inline-start on the panels area (and -end for the reverse layout) so the tabbar and panels have breathing room. --- .../wwwroot/volo.abp.mudblazorui.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/framework/src/Volo.Abp.MudBlazorUI/wwwroot/volo.abp.mudblazorui.css b/framework/src/Volo.Abp.MudBlazorUI/wwwroot/volo.abp.mudblazorui.css index ff68f89c0f..5fa2c86435 100644 --- a/framework/src/Volo.Abp.MudBlazorUI/wwwroot/volo.abp.mudblazorui.css +++ b/framework/src/Volo.Abp.MudBlazorUI/wwwroot/volo.abp.mudblazorui.css @@ -98,3 +98,15 @@ line-height: 1.4rem; } + +/* Vertical MudTabs (Position="Left"/"Right"): add horizontal gap between the tabbar + and the panels container so the active tab indicator does not visually touch the + panel content. v9 default puts them flush against each other. */ +.mud-tabs.mud-tabs-vertical > .mud-tabs-panels { + padding-inline-start: 16px; +} + +.mud-tabs.mud-tabs-vertical-reverse > .mud-tabs-panels { + padding-inline-end: 16px; +} +