From b4c11cd0a66e44c46d2b1ebdfdcc7f3811953fd0 Mon Sep 17 00:00:00 2001
From: James Kolpack <james.kolpack@gmail.com>
Date: Sat, 17 Jan 2026 10:41:46 -0500
Subject: [PATCH] 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.
---
 .../Components/Features/Calendar/Index.razor  |  8 ++++--
 .../Components/Features/Events/Details.razor  | 12 +++++---
 WebApp/Components/Features/Events/Index.razor | 12 ++++++--
 .../Features/Students/Details.razor           | 12 +++++---
 .../Features/Students/EventRankingEdit.razor  | 14 ++++++----
 .../Components/Features/Students/Index.razor  | 12 ++++++--
 .../Features/Students/Registration.razor      | 14 ++++++----
 .../Features/Teams/Assignment.razor           |  8 ++++--
 .../Components/Features/Teams/Details.razor   | 16 +++++++----
 WebApp/Components/Features/Teams/Index.razor  | 26 +++++++++++------
 WebApp/Components/Pages/Notes.razor           | 28 +++++++++++--------
 WebApp/wwwroot/app.css                        | 25 ++++++++++++++++-
 12 files changed, 128 insertions(+), 59 deletions(-)

diff --git a/WebApp/Components/Features/Calendar/Index.razor b/WebApp/Components/Features/Calendar/Index.razor
index dcdb05a..da5fe85 100644
--- a/WebApp/Components/Features/Calendar/Index.razor
+++ b/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>
-        <MudButton StartIcon="@Icons.Material.Filled.ImportExport" Href="calendar/event-occurrences/import" Variant="Variant.Filled" Color="Color.Primary">Import</MudButton>
+        <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">
-            <MudButton StartIcon="@Icons.Material.Filled.AdminPanelSettings" Href="calendar/admin" Variant="Variant.Outlined" Color="Color.Default">Admin</MudButton>
+            <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>
diff --git a/WebApp/Components/Features/Events/Details.razor b/WebApp/Components/Features/Events/Details.razor
index 8daf73c..434c945 100644
--- a/WebApp/Components/Features/Events/Details.razor
+++ b/WebApp/Components/Features/Events/Details.razor
@@ -19,10 +19,14 @@
     BackButtonUrl="@(ReturnUrl ?? "/events")">
     <ActionButtons>
         <div class="no-print">
-            <MudButton StartIcon="@Icons.Material.Filled.Print"
-                       OnClick="PrintPage"
-                       Variant="Variant.Outlined">Print</MudButton>
-            <MudButton StartIcon="@Icons.Material.Filled.Edit" Href="@($"/events/edit?id={eventdefinition.Id}&returnUrl={ReturnUrl ?? "/events"}")" Variant="Variant.Outlined">Edit</MudButton>
+            <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>
diff --git a/WebApp/Components/Features/Events/Index.razor b/WebApp/Components/Features/Events/Index.razor
index 780f764..186f918 100644
--- a/WebApp/Components/Features/Events/Index.razor
+++ b/WebApp/Components/Features/Events/Index.razor
@@ -10,9 +10,15 @@
 
 <PageHeader Title="Events">
     <ActionButtons>
-        <MudButton StartIcon="@Icons.Material.Filled.Create" Href="events/create" Variant="Variant.Filled" Color="Color.Primary">Create New</MudButton>
-        <MudButton StartIcon="@Icons.Material.Filled.Print" Href="events/printout" Variant="Variant.Outlined">Printable Descriptions</MudButton>
-        <MudButton StartIcon="@Icons.Material.Filled.AccountTree" Href="events/career-mapping" Variant="Variant.Outlined">Career Mapping</MudButton>
+        <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>
 
diff --git a/WebApp/Components/Features/Students/Details.razor b/WebApp/Components/Features/Students/Details.razor
index 395a8da..d0ea9a2 100644
--- a/WebApp/Components/Features/Students/Details.razor
+++ b/WebApp/Components/Features/Students/Details.razor
@@ -18,10 +18,14 @@
     BackButtonUrl="@(ReturnUrl ?? "/students")">
     <ActionButtons>
         <div class="no-print">
-            <MudButton StartIcon="@Icons.Material.Filled.Print"
-                       OnClick="PrintPage"
-                       Variant="Variant.Outlined">Print</MudButton>
-            <MudButton StartIcon="@Icons.Material.Filled.Edit" Href="@($"/students/edit?id={student.Id}&returnUrl={ReturnUrl ?? "/students"}")" Variant="Variant.Outlined">Edit</MudButton>
+            <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>
diff --git a/WebApp/Components/Features/Students/EventRankingEdit.razor b/WebApp/Components/Features/Students/EventRankingEdit.razor
index 3e94502..a7f047e 100644
--- a/WebApp/Components/Features/Students/EventRankingEdit.razor
+++ b/WebApp/Components/Features/Students/EventRankingEdit.razor
@@ -22,12 +22,14 @@ else
         ShowBackButton="true"
         BackButtonUrl="/students/event-ranking">
         <ActionButtons>
-            <MudButton StartIcon="@Icons.Material.Filled.Save"
-                       OnClick="Save"
-                       Color="Color.Primary"
-                       Variant="Variant.Filled">
-                Save Rankings
-            </MudButton>
+            <MudTooltip Text="Save Rankings">
+                <MudButton StartIcon="@Icons.Material.Filled.Save"
+                           OnClick="Save"
+                           Color="Color.Primary"
+                           Variant="Variant.Filled">
+                    Save Rankings
+                </MudButton>
+            </MudTooltip>
         </ActionButtons>
     </PageHeader>
 
diff --git a/WebApp/Components/Features/Students/Index.razor b/WebApp/Components/Features/Students/Index.razor
index 5bd2f3d..d7fd32e 100644
--- a/WebApp/Components/Features/Students/Index.razor
+++ b/WebApp/Components/Features/Students/Index.razor
@@ -10,9 +10,15 @@
 
 <PageHeader Title="Students">
     <ActionButtons>
-        <MudButton StartIcon="@Icons.Material.Filled.Create" Href="students/create" Variant="Variant.Filled" Color="Color.Primary">Create New</MudButton>
-        <MudButton StartIcon="@AppIcons.EventRank" Href="students/event-ranking" Variant="Variant.Outlined">Event Rankings</MudButton>
-        <MudButton StartIcon="@AppIcons.Registration" Href="students/teams" Variant="Variant.Outlined">Registration</MudButton>
+        <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>
 
diff --git a/WebApp/Components/Features/Students/Registration.razor b/WebApp/Components/Features/Students/Registration.razor
index e1e8fee..5355017 100644
--- a/WebApp/Components/Features/Students/Registration.razor
+++ b/WebApp/Components/Features/Students/Registration.razor
@@ -11,12 +11,14 @@
 
 <PageHeader Title="Registration" Icon="@AppIcons.Registration">
     <ActionButtons>
-        <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 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>
diff --git a/WebApp/Components/Features/Teams/Assignment.razor b/WebApp/Components/Features/Teams/Assignment.razor
index c94b4ed..391c343 100644
--- a/WebApp/Components/Features/Teams/Assignment.razor
+++ b/WebApp/Components/Features/Teams/Assignment.razor
@@ -15,9 +15,11 @@
     Title="Assignment"
     Description="Optimized team assignments based on the student event rankings">
     <ActionButtons>
-        <MudButton StartIcon="@Icons.Material.Filled.Edit" Href="students/event-ranking" Variant="Variant.Outlined">
-            Edit Student Event Rankings
-        </MudButton>
+        <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>
diff --git a/WebApp/Components/Features/Teams/Details.razor b/WebApp/Components/Features/Teams/Details.razor
index fbee908..1a996b5 100644
--- a/WebApp/Components/Features/Teams/Details.razor
+++ b/WebApp/Components/Features/Teams/Details.razor
@@ -19,12 +19,16 @@
     BackButtonUrl="@(ReturnUrl ?? "/teams")">
     <ActionButtons>
         <div class="no-print">
-            <MudButton StartIcon="@Icons.Material.Filled.Print"
-                       OnClick="PrintPage"
-                       Variant="Variant.Outlined">Print</MudButton>
-            <MudButton StartIcon="@Icons.Material.Filled.Edit"
-                       Href="@($"/teams/edit?id={Team.Id}&returnUrl={ReturnUrl ?? "/teams"}")"
-                       Variant="Variant.Outlined">Edit</MudButton>
+            <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>
diff --git a/WebApp/Components/Features/Teams/Index.razor b/WebApp/Components/Features/Teams/Index.razor
index da37039..52dad5a 100644
--- a/WebApp/Components/Features/Teams/Index.razor
+++ b/WebApp/Components/Features/Teams/Index.razor
@@ -10,15 +10,23 @@
 
 <PageHeader Title="Teams">
     <ActionButtons>
-        <MudButton StartIcon="@Icons.Material.Filled.Create" Href="teams/create" Variant="Variant.Filled" Color="Color.Primary">Create New</MudButton>
-        <MudButton StartIcon="@Icons.Material.Filled.Print" Href="teams/printout" Variant="Variant.Outlined">Printout</MudButton>
-        <MudButton StartIcon="@Icons.Material.Filled.Print" Href="teams/handout" Variant="Variant.Outlined">Handout</MudButton>
-        <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 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>
diff --git a/WebApp/Components/Pages/Notes.razor b/WebApp/Components/Pages/Notes.razor
index d14b56a..3d6ba05 100644
--- a/WebApp/Components/Pages/Notes.razor
+++ b/WebApp/Components/Pages/Notes.razor
@@ -11,18 +11,22 @@
 
 <PageHeader Title="Notes">
     <ActionButtons>
-        <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>
-        <MudButton StartIcon="@Icons.Material.Filled.Add" 
-                  OnClick="OpenCreateDialog" 
-                  Variant="Variant.Filled" 
-                  Color="Color.Primary">
-            Create Note
-        </MudButton>
+        <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>
 
diff --git a/WebApp/wwwroot/app.css b/WebApp/wwwroot/app.css
index d6bb642..667c645 100644
--- a/WebApp/wwwroot/app.css
+++ b/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 {