How remove Blazor top-row clickable area before user profile name-CodePudding

In blazor default template, after user login, the whole top-row is clickable an anchor element which leads to login/profile page as shown is the image below:

I tried but I cannot figure out how we can limit this clickable zone to only the profile name text?

CodePudding user response：

One possible solution is to add max-width: min-content; to the .top-row ::deep a, .top-row ::deep .btn-link selector in MainLayout.razor.css:

.top-row ::deep a, .top-row ::deep .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
    max-width: min-content;
}

CodePudding user response：

I think this is more an html question than Blazor. You may disable div href and put the "clickable" area into a button. You can edit this html on Shared/MainLayout