Enhance UI with MudTooltip for action buttons across various components

This commit adds MudTooltip components to action buttons in the Calendar, Events, Students, and Teams features, improving user experience by providing contextual information on button actions. The changes ensure that users receive helpful hints when hovering over buttons, enhancing accessibility and usability throughout the application.

WebApp/Components/Features/Calendar/Index.razor

@@ -12,9 +12,13 @@
 
 <PageHeader Title="Event Calendar" Description="View competition schedules and event occurrences" Icon="@AppIcons.EventCalendar">
     <ActionButtons>
+        <MudTooltip Text="Import">
             <MudButton StartIcon="@Icons.Material.Filled.ImportExport" Href="calendar/event-occurrences/import" Variant="Variant.Filled" Color="Color.Primary">Import</MudButton>
+        </MudTooltip>
         <AuthorizeView Roles="@AuthRoles.Administrator">
+            <MudTooltip Text="Admin">
                 <MudButton StartIcon="@Icons.Material.Filled.AdminPanelSettings" Href="calendar/admin" Variant="Variant.Outlined" Color="Color.Default">Admin</MudButton>
+            </MudTooltip>
         </AuthorizeView>
         <PageNoteButton PageIdentifier="Event Calendar" />
     </ActionButtons>

WebApp/Components/Features/Events/Details.razor

@@ -19,10 +19,14 @@
     BackButtonUrl="@(ReturnUrl ?? "/events")">
     <ActionButtons>
         <div class="no-print">
+            <MudTooltip Text="Print">
                 <MudButton StartIcon="@Icons.Material.Filled.Print"
                            OnClick="PrintPage"
                            Variant="Variant.Outlined">Print</MudButton>
+            </MudTooltip>
+            <MudTooltip Text="Edit">
                 <MudButton StartIcon="@Icons.Material.Filled.Edit" Href="@($"/events/edit?id={eventdefinition.Id}&returnUrl={ReturnUrl ?? "/events"}")" Variant="Variant.Outlined">Edit</MudButton>
+            </MudTooltip>
         </div>
     </ActionButtons>
 </PageHeader>

WebApp/Components/Features/Events/Index.razor

@@ -10,9 +10,15 @@
 
 <PageHeader Title="Events">
     <ActionButtons>
+        <MudTooltip Text="Create New">
             <MudButton StartIcon="@Icons.Material.Filled.Create" Href="events/create" Variant="Variant.Filled" Color="Color.Primary">Create New</MudButton>
+        </MudTooltip>
+        <MudTooltip Text="Printable Descriptions">
             <MudButton StartIcon="@Icons.Material.Filled.Print" Href="events/printout" Variant="Variant.Outlined">Printable Descriptions</MudButton>
+        </MudTooltip>
+        <MudTooltip Text="Career Mapping">
             <MudButton StartIcon="@Icons.Material.Filled.AccountTree" Href="events/career-mapping" Variant="Variant.Outlined">Career Mapping</MudButton>
+        </MudTooltip>
     </ActionButtons>
 </PageHeader>
 

WebApp/Components/Features/Students/Details.razor

@@ -18,10 +18,14 @@
     BackButtonUrl="@(ReturnUrl ?? "/students")">
     <ActionButtons>
         <div class="no-print">
+            <MudTooltip Text="Print">
                 <MudButton StartIcon="@Icons.Material.Filled.Print"
                            OnClick="PrintPage"
                            Variant="Variant.Outlined">Print</MudButton>
+            </MudTooltip>
+            <MudTooltip Text="Edit">
                 <MudButton StartIcon="@Icons.Material.Filled.Edit" Href="@($"/students/edit?id={student.Id}&returnUrl={ReturnUrl ?? "/students"}")" Variant="Variant.Outlined">Edit</MudButton>
+            </MudTooltip>
         </div>
     </ActionButtons>
 </PageHeader>

WebApp/Components/Features/Students/EventRankingEdit.razor

@@ -22,12 +22,14 @@ else
         ShowBackButton="true"
         BackButtonUrl="/students/event-ranking">
         <ActionButtons>
+            <MudTooltip Text="Save Rankings">
                 <MudButton StartIcon="@Icons.Material.Filled.Save"
                            OnClick="Save"
                            Color="Color.Primary"
                            Variant="Variant.Filled">
                     Save Rankings
                 </MudButton>
+            </MudTooltip>
         </ActionButtons>
     </PageHeader>
 

WebApp/Components/Features/Students/Index.razor

@@ -10,9 +10,15 @@
 
 <PageHeader Title="Students">
     <ActionButtons>
+        <MudTooltip Text="Create New">
             <MudButton StartIcon="@Icons.Material.Filled.Create" Href="students/create" Variant="Variant.Filled" Color="Color.Primary">Create New</MudButton>
+        </MudTooltip>
+        <MudTooltip Text="Event Rankings">
             <MudButton StartIcon="@AppIcons.EventRank" Href="students/event-ranking" Variant="Variant.Outlined">Event Rankings</MudButton>
+        </MudTooltip>
+        <MudTooltip Text="Registration">
             <MudButton StartIcon="@AppIcons.Registration" Href="students/teams" Variant="Variant.Outlined">Registration</MudButton>
+        </MudTooltip>
     </ActionButtons>
 </PageHeader>
 

WebApp/Components/Features/Students/Registration.razor

@@ -11,12 +11,14 @@
 
 <PageHeader Title="Registration" Icon="@AppIcons.Registration">
     <ActionButtons>
+        <MudTooltip Text="@(_showRegionalOnly ? "Showing Regional Only" : "Show Regional Only")">
             <MudButton StartIcon="@Icons.Material.Filled.FilterAlt"
                        Variant="@(_showRegionalOnly ? Variant.Filled : Variant.Outlined)"
                        Color="Color.Primary"
                        OnClick="ToggleRegionalFilter">
                 @(_showRegionalOnly ? "Showing Regional Only" : "Show Regional Only")
             </MudButton>
+        </MudTooltip>
         <PageNoteButton PageIdentifier="Registration" />
     </ActionButtons>
 </PageHeader>

WebApp/Components/Features/Teams/Assignment.razor

@@ -15,9 +15,11 @@
     Title="Assignment"
     Description="Optimized team assignments based on the student event rankings">
     <ActionButtons>
+        <MudTooltip Text="Edit Student Event Rankings">
             <MudButton StartIcon="@Icons.Material.Filled.Edit" Href="students/event-ranking" Variant="Variant.Outlined">
                 Edit Student Event Rankings
             </MudButton>
+        </MudTooltip>
         <PageNoteButton PageIdentifier="Team Assignment" />
     </ActionButtons>
 </PageHeader>

WebApp/Components/Features/Teams/Details.razor

@@ -19,12 +19,16 @@
     BackButtonUrl="@(ReturnUrl ?? "/teams")">
     <ActionButtons>
         <div class="no-print">
+            <MudTooltip Text="Print">
                 <MudButton StartIcon="@Icons.Material.Filled.Print"
                            OnClick="PrintPage"
                            Variant="Variant.Outlined">Print</MudButton>
+            </MudTooltip>
+            <MudTooltip Text="Edit">
                 <MudButton StartIcon="@Icons.Material.Filled.Edit"
                            Href="@($"/teams/edit?id={Team.Id}&returnUrl={ReturnUrl ?? "/teams"}")"
                            Variant="Variant.Outlined">Edit</MudButton>
+            </MudTooltip>
         </div>
     </ActionButtons>
 </PageHeader>

WebApp/Components/Features/Teams/Index.razor

@@ -10,15 +10,23 @@
 
 <PageHeader Title="Teams">
     <ActionButtons>
+        <MudTooltip Text="Create New">
             <MudButton StartIcon="@Icons.Material.Filled.Create" Href="teams/create" Variant="Variant.Filled" Color="Color.Primary">Create New</MudButton>
+        </MudTooltip>
+        <MudTooltip Text="Printout">
             <MudButton StartIcon="@Icons.Material.Filled.Print" Href="teams/printout" Variant="Variant.Outlined">Printout</MudButton>
+        </MudTooltip>
+        <MudTooltip Text="Handout">
             <MudButton StartIcon="@Icons.Material.Filled.Print" Href="teams/handout" Variant="Variant.Outlined">Handout</MudButton>
+        </MudTooltip>
+        <MudTooltip Text="@(_showRegionalOnly ? "Showing Regional Only" : "Show Regional Only")">
             <MudButton StartIcon="@Icons.Material.Filled.FilterAlt"
                        Variant="@(_showRegionalOnly ? Variant.Filled : Variant.Outlined)"
                        Color="Color.Primary"
                        OnClick="ToggleRegionalFilter">
                 @(_showRegionalOnly ? "Showing Regional Only" : "Show Regional Only")
             </MudButton>
+        </MudTooltip>
         <PageNoteButton PageIdentifier="Teams" />
     </ActionButtons>
 </PageHeader>

WebApp/Components/Pages/Notes.razor

@@ -11,18 +11,22 @@
 
 <PageHeader Title="Notes">
     <ActionButtons>
+        <MudTooltip Text="@(_showRemoved ? "Show Active" : "Show Removed")">
             <MudButton StartIcon="@(_showRemoved ? Icons.Material.Filled.List : Icons.Material.Filled.DeleteOutline)"
                       OnClick="ToggleRemovedFilter"
                       Variant="Variant.Outlined"
                       Color="@(_showRemoved ? Color.Warning : Color.Default)">
                 @(_showRemoved ? "Show Active" : "Show Removed")
             </MudButton>
+        </MudTooltip>
+        <MudTooltip Text="Create Note">
             <MudButton StartIcon="@Icons.Material.Filled.Add" 
                       OnClick="OpenCreateDialog" 
                       Variant="Variant.Filled" 
                       Color="Color.Primary">
                 Create Note
             </MudButton>
+        </MudTooltip>
     </ActionButtons>
 </PageHeader>
 

WebApp/wwwroot/app.css

@@ -61,8 +61,31 @@
 
 @media (max-width: 600px) {
     .page-header-actions {
-        width: 100%;
+        justify-content: flex-end;
         margin-top: 0.5rem;
+        margin-left: auto;
+    }
+    
+    /* Hide button text on small screens by setting font-size to 0 */
+    .page-header-actions .mud-button {
+        min-width: auto;
+        padding-left: 12px;
+        padding-right: 12px;
+        font-size: 0;
+    }
+    
+    /* Restore icon size - MudBlazor uses material-icons font */
+    .page-header-actions .mud-button .mud-icon-root {
+        font-size: 1.5rem !important;
+        display: inline-flex !important;
+    }
+    
+    .page-header-actions .mud-button .mud-icon-root .mud-icon,
+    .page-header-actions .mud-button .mud-icon-root .material-icons {
+        font-size: 1.5rem !important;
+        width: 1.5rem !important;
+        height: 1.5rem !important;
+        line-height: 1.5rem !important;
     }
     
     .page-header > div > div:first-of-type {