Fixed vertical scrolling for very long file names

This commit is contained in:
Thorsten Sommer 2025-12-18 08:24:03 +01:00
parent 7dd505b554
commit d0455db13e
Signed by: tsommer
GPG Key ID: 371BBA77A02C0108

View File

@ -13,7 +13,7 @@
<MudDivider Class="mt-3 mb-3"/> <MudDivider Class="mt-3 mb-3"/>
<div style="max-height: 50vh; overflow-y: auto; padding-right: 8px;"> <div style="max-height: 50vh; overflow-y: auto; overflow-x: hidden; padding-right: 8px;">
@if (!this.DocumentPaths.Any()) @if (!this.DocumentPaths.Any())
{ {
<MudJustifiedText Typo="Typo.body1" Class="mt-3"> <MudJustifiedText Typo="Typo.body1" Class="mt-3">
@ -26,20 +26,23 @@
@if (File.Exists(filePath)) @if (File.Exists(filePath))
{ {
<MudStack Row Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center" Class="mb-2"> <MudStack Row Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center" Class="mb-2">
<MudTooltip Text="@T("Your attached file")" Placement="Placement.Bottom"> <div style="min-width: 0; flex: 1; overflow: hidden;">
<span class="d-inline-flex align-items-center" style="max-width: 100%;"> <MudTooltip Text="@T("Your attached file")" Placement="Placement.Bottom">
<MudIcon Icon="@Icons.Material.Filled.AttachFile" Class="mr-2"/> <span class="d-inline-flex align-items-center" style="overflow: hidden; width: 100%;">
<MudText Class="flex-grow-1 overflow-hidden text-ellipsis" Style="white-space: nowrap;"> <MudIcon Icon="@Icons.Material.Filled.AttachFile" Class="mr-2" Style="flex-shrink: 0;"/>
@Path.GetFileName(filePath) <MudText Style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
</MudText> @Path.GetFileName(filePath)
</span> </MudText>
</MudTooltip> </span>
</MudTooltip>
</div>
<MudTooltip Text="@T("Delete")" Placement="Placement.Bottom"> <MudTooltip Text="@T("Remove the attachment.")" Placement="Placement.Bottom">
<MudIconButton Icon="@Icons.Material.Filled.Delete" <MudIconButton Icon="@Icons.Material.Filled.Delete"
Color="Color.Error" Color="Color.Error"
Class="ml-2" Class="ml-2"
OnClick="@(() => DeleteAttachment(filePath))"/> Style="flex-shrink: 0;"
OnClick="@(() => this.DeleteAttachment(filePath))"/>
</MudTooltip> </MudTooltip>
</MudStack> </MudStack>
@ -47,20 +50,23 @@
else else
{ {
<MudStack Row Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center" Class="mb-2"> <MudStack Row Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center" Class="mb-2">
<MudTooltip Text="@T("The file was deleted, renamed, or moved")" Placement="Placement.Bottom"> <div style="min-width: 0; flex: 1; overflow: hidden;">
<span class="d-inline-flex align-items-center" style="max-width: 100%;"> <MudTooltip Text="@T("The file was deleted, renamed, or moved")" Placement="Placement.Bottom">
<MudIcon Icon="@Icons.Material.Filled.Report" Color="Color.Error" Class="mr-2"/> <span class="d-inline-flex align-items-center" style="overflow: hidden; width: 100%;">
<MudText Class="flex-grow-1 overflow-hidden text-ellipsis" Style="white-space: nowrap;"> <MudIcon Icon="@Icons.Material.Filled.Report" Color="Color.Error" Class="mr-2" Style="flex-shrink: 0;"/>
<s>@Path.GetFileName(filePath)</s> <MudText Style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
</MudText> <s>@Path.GetFileName(filePath)</s>
</span> </MudText>
</MudTooltip> </span>
</MudTooltip>
</div>
<MudTooltip Text="@T("Delete")" Placement="Placement.Bottom"> <MudTooltip Text="@T("Delete")" Placement="Placement.Bottom">
<MudIconButton Icon="@Icons.Material.Filled.Delete" <MudIconButton Icon="@Icons.Material.Filled.Delete"
Color="Color.Error" Color="Color.Error"
Class="ml-2" Class="ml-2"
OnClick="@(() => DeleteAttachment(filePath))"/> Style="flex-shrink: 0;"
OnClick="@(() => this.DeleteAttachment(filePath))"/>
</MudTooltip> </MudTooltip>
</MudStack> </MudStack>
} }