#448 - Shrinking buttons in bottom main menu when screen is too narrow

maraf · Aug 5, 2024 · dc75abf · dc75abf
1 parent 3887ea7
commit dc75abf
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/src/Money.Blazor.Host/Layouts/BottomMenu.razor b/src/Money.Blazor.Host/Layouts/BottomMenu.razor
@@ -80,21 +80,21 @@
     {
         var isLogout = item.Text == "Logout";
         return 
-            @<div class="col-3 d-grid">
+            @<div class="col-3">
                 @if (item.Url != null)
                 {
                     <Match Url="@item.Url" PageType="@item.PageType" Context="IsActive">
-                        <a href="@item.Url" class="btn @(IsActive ? "btn-primary" : "bg-light-subtle")" @onclick="(() => OnLinkClick(item.IsBlurMenuAfterClick))">
+                        <a href="@item.Url" class="btn @(IsActive ? "btn-primary" : "bg-light-subtle") w-100" @onclick="(() => OnLinkClick(item.IsBlurMenuAfterClick))">
                             <Icon Identifier="@item.Icon" />
-                            <span class="text d-block">
+                            <span class="text d-block text-truncate">
                                 @item.Text
                             </span>
                         </a>
                     </Match>
                 }
                 else
                 {
-                    <button @onclick="@item.OnClick" class="btn bg-light-subtle @(isLogout ? "text-danger" : string.Empty)">
+                    <button @onclick="@item.OnClick" class="btn bg-light-subtle @(isLogout ? "text-danger" : string.Empty) w-100">
                         <Icon Identifier="@item.Icon" />
                         <span class="text d-block">
                             @item.Text