From 87db67f979cf4c33a56f8ec99211573819cd8a35 Mon Sep 17 00:00:00 2001
From: James Kolpack <james.kolpack@gmail.com>
Date: Mon, 5 Jan 2026 14:01:46 -0500
Subject: [PATCH] Refactor MudPaper component styling across various features
 for consistency

Updated the MudPaper component styling in multiple files to use a consistent padding class of "pa-3 pa-md-6" instead of "pa-6". This change enhances the visual consistency of the UI across the Calendar, Events, Students, and Teams components, improving the overall user experience.
---
 .../Components/Features/Calendar/Import.razor |  4 +-
 .../Components/Features/Calendar/Index.razor  |  2 +-
 .../Features/Events/CareerMapping.razor       |  6 +-
 .../Components/Features/Events/Create.razor   |  8 +--
 .../Components/Features/Events/Details.razor  |  2 +-
 WebApp/Components/Features/Events/Edit.razor  |  8 +--
 WebApp/Components/Features/Events/Index.razor |  2 +-
 .../Features/MeetingSchedule/Index.razor      |  6 +-
 .../Components/Features/Students/Create.razor |  2 +-
 .../Features/Students/Details.razor           |  2 +-
 .../Components/Features/Students/Edit.razor   |  2 +-
 .../Features/Students/EventRanking.razor      |  4 +-
 .../Components/Features/Students/Index.razor  |  6 +-
 .../Features/Students/Registration.razor      |  9 +--
 .../Features/Teams/Assignment.razor           |  4 +-
 .../Teams/Components/TeamStudents.razor       | 62 ++++++++++---------
 WebApp/Components/Features/Teams/Create.razor |  2 +-
 .../Components/Features/Teams/Details.razor   |  2 +-
 WebApp/Components/Features/Teams/Edit.razor   |  2 +-
 WebApp/Components/Features/Teams/Goals.razor  |  2 +-
 WebApp/Components/Features/Teams/Index.razor  |  2 +-
 .../Components/Shared/Layout/MainLayout.razor |  4 +-
 WebApp/wwwroot/app.css                        | 41 ++++++++++++
 23 files changed, 115 insertions(+), 69 deletions(-)

diff --git a/WebApp/Components/Features/Calendar/Import.razor b/WebApp/Components/Features/Calendar/Import.razor
index bc3aed3..afbc52e 100644
--- a/WebApp/Components/Features/Calendar/Import.razor
+++ b/WebApp/Components/Features/Calendar/Import.razor
@@ -19,7 +19,7 @@
 
 <MudGrid>
     <MudItem xs="12" md="6">
-        <MudPaper Elevation="2" Class="pa-6">
+        <MudPaper Elevation="2" Class="pa-3 pa-md-6">
             <MudText Typo="Typo.h5" Class="mb-4">Paste Event Occurrence Data</MudText>
             <MudStack Spacing="3">
                 <MudTextField 
@@ -53,7 +53,7 @@
     </MudItem>
 
     <MudItem xs="12" md="6">
-        <MudPaper Elevation="2" Class="pa-6">
+        <MudPaper Elevation="2" Class="pa-3 pa-md-6">
             <MudText Typo="Typo.h5" Class="mb-4">Parsed Results</MudText>
             
             @if (_isParsing)
diff --git a/WebApp/Components/Features/Calendar/Index.razor b/WebApp/Components/Features/Calendar/Index.razor
index 244776a..5998030 100644
--- a/WebApp/Components/Features/Calendar/Index.razor
+++ b/WebApp/Components/Features/Calendar/Index.razor
@@ -14,7 +14,7 @@
     </ActionButtons>
 </PageHeader>
 
-<MudPaper Elevation="2" Class="pa-6">
+<MudPaper Elevation="2" Class="pa-3 pa-md-6">
     @if (_calendarItems == null)
     {
         <MudProgressLinear Indeterminate="true" />
diff --git a/WebApp/Components/Features/Events/CareerMapping.razor b/WebApp/Components/Features/Events/CareerMapping.razor
index c1e4360..95e7798 100644
--- a/WebApp/Components/Features/Events/CareerMapping.razor
+++ b/WebApp/Components/Features/Events/CareerMapping.razor
@@ -14,14 +14,14 @@
 
 @if (_isLoading)
 {
-    <MudPaper Elevation="2" Class="pa-6">
+    <MudPaper Elevation="2" Class="pa-3 pa-md-6">
         <MudProgressLinear Indeterminate="true" Color="Color.Primary"/>
         <MudText Typo="Typo.body1" Class="mt-4">Loading career mapping data...</MudText>
     </MudPaper>
 }
 else if (_networkData == null || !_networkData.Nodes.Any())
 {
-    <MudPaper Elevation="2" Class="pa-6">
+    <MudPaper Elevation="2" Class="pa-3 pa-md-6">
         <MudText Typo="Typo.h6" Class="mb-4">No Career Field Mappings Found</MudText>
         <MudText Typo="Typo.body1" Class="mud-text-secondary">
             No events have related careers assigned that match any career fields. Edit events to add related careers.
@@ -30,7 +30,7 @@ else if (_networkData == null || !_networkData.Nodes.Any())
 }
 else
 {
-    <MudPaper Elevation="2" Class="pa-6">
+    <MudPaper Elevation="2" Class="pa-3 pa-md-6">
         <MudText Typo="Typo.h6" Class="mb-4">Event-Career Field Relationships</MudText>
         <MudText Typo="Typo.body2" Class="mb-4 mud-text-secondary">
             This diagram shows the connections between events and their related career fields.
diff --git a/WebApp/Components/Features/Events/Create.razor b/WebApp/Components/Features/Events/Create.razor
index 76c0b0d..cf53ef6 100644
--- a/WebApp/Components/Features/Events/Create.razor
+++ b/WebApp/Components/Features/Events/Create.razor
@@ -25,7 +25,7 @@
     <ValidationErrorDisplay Errors="_validationErrors" />
 
     <MudStack Spacing="4">
-        <MudPaper Elevation="2" Class="pa-6">
+        <MudPaper Elevation="2" Class="pa-3 pa-md-6">
             <MudText Typo="Typo.h5" Class="mb-4">Basic Information</MudText>
             <MudGrid Spacing="3">
                 <MudItem xs="12" sm="6">
@@ -49,7 +49,7 @@
             </MudGrid>
         </MudPaper>
 
-        <MudPaper Elevation="2" Class="pa-6">
+        <MudPaper Elevation="2" Class="pa-3 pa-md-6">
             <MudText Typo="Typo.h5" Class="mb-4">Event Details</MudText>
             <MudGrid Spacing="3">
                 <MudItem xs="12">
@@ -67,7 +67,7 @@
             </MudGrid>
         </MudPaper>
 
-        <MudPaper Elevation="2" Class="pa-6">
+        <MudPaper Elevation="2" Class="pa-3 pa-md-6">
             <MudText Typo="Typo.h5" Class="mb-4">Team Configuration</MudText>
             <MudGrid Spacing="3">
                 <MudItem xs="12">
@@ -88,7 +88,7 @@
             </MudGrid>
         </MudPaper>
 
-        <MudPaper Elevation="2" Class="pa-6">
+        <MudPaper Elevation="2" Class="pa-3 pa-md-6">
             <MudText Typo="Typo.h5" Class="mb-4">Competition Details</MudText>
             <MudGrid Spacing="3">
                 <MudItem xs="12">
diff --git a/WebApp/Components/Features/Events/Details.razor b/WebApp/Components/Features/Events/Details.razor
index 549c7ad..82cb007 100644
--- a/WebApp/Components/Features/Events/Details.razor
+++ b/WebApp/Components/Features/Events/Details.razor
@@ -27,7 +27,7 @@
     </ActionButtons>
 </PageHeader>
 
-<MudPaper Elevation="2" Class="pa-6">
+<MudPaper Elevation="2" Class="pa-3 pa-md-6">
     <MudText Typo="Typo.h5" Class="mb-4">Basic Information</MudText>
     <MudGrid Spacing="3">
         <MudItem xs="12" sm="6" md="4">
diff --git a/WebApp/Components/Features/Events/Edit.razor b/WebApp/Components/Features/Events/Edit.razor
index 9bf2363..63c5a93 100644
--- a/WebApp/Components/Features/Events/Edit.razor
+++ b/WebApp/Components/Features/Events/Edit.razor
@@ -32,7 +32,7 @@
     <ValidationErrorDisplay Errors="_validationErrors" />
 
     <MudStack Spacing="4">
-        <MudPaper Elevation="2" Class="pa-6">
+        <MudPaper Elevation="2" Class="pa-3 pa-md-6">
             <MudText Typo="Typo.h5" Class="mb-4">Basic Information</MudText>
             <MudGrid Spacing="3">
                 <MudItem xs="12" sm="6">
@@ -56,7 +56,7 @@
             </MudGrid>
         </MudPaper>
 
-        <MudPaper Elevation="2" Class="pa-6">
+        <MudPaper Elevation="2" Class="pa-3 pa-md-6">
             <MudText Typo="Typo.h5" Class="mb-4">Event Details</MudText>
             <MudGrid Spacing="3">
                 <MudItem xs="12">
@@ -74,7 +74,7 @@
             </MudGrid>
         </MudPaper>
 
-        <MudPaper Elevation="2" Class="pa-6">
+        <MudPaper Elevation="2" Class="pa-3 pa-md-6">
             <MudText Typo="Typo.h5" Class="mb-4">Team Configuration</MudText>
             <MudGrid Spacing="3">
                 <MudItem xs="12">
@@ -95,7 +95,7 @@
             </MudGrid>
         </MudPaper>
 
-        <MudPaper Elevation="2" Class="pa-6">
+        <MudPaper Elevation="2" Class="pa-3 pa-md-6">
             <MudText Typo="Typo.h5" Class="mb-4">Competition Details</MudText>
             <MudGrid Spacing="3">
                 <MudItem xs="12">
diff --git a/WebApp/Components/Features/Events/Index.razor b/WebApp/Components/Features/Events/Index.razor
index 2909070..d37b407 100644
--- a/WebApp/Components/Features/Events/Index.razor
+++ b/WebApp/Components/Features/Events/Index.razor
@@ -15,7 +15,7 @@
     </ActionButtons>
 </PageHeader>
 
-<MudPaper Elevation="2" Class="pa-6">
+<MudPaper Elevation="2" Class="pa-3 pa-md-6">
     <MudDataGrid T="EventDefinition"
                  ServerData="ServerReload"
                  @ref="_dataGrid"
diff --git a/WebApp/Components/Features/MeetingSchedule/Index.razor b/WebApp/Components/Features/MeetingSchedule/Index.razor
index 9cc6575..68c90f7 100644
--- a/WebApp/Components/Features/MeetingSchedule/Index.razor
+++ b/WebApp/Components/Features/MeetingSchedule/Index.razor
@@ -11,9 +11,9 @@
 
 <PageHeader Title="@($"{Configuration["ChapterSettings:Shortname"]} TSA Schedule {Configuration["ChapterSettings:CompetitionYear"]}")" />
 
-<MudPaper Elevation="2" Class="pa-6 mt-4">
+<MudPaper Elevation="2" Class="pa-3 pa-md-6 mt-4">
     <MudGrid>
-        <MudItem xs="7" sm="8" lg="9">
+        <MudItem xs="12" sm="8" lg="9">
             <MudText Typo="Typo.h4">Time Slots</MudText>
             <MudPaper Class="pa-2 ma-2" Elevation="3">
                 <MudGrid>
@@ -81,7 +81,7 @@
                 </RowTemplate>
             </MudTable>
         </MudItem>
-        <MudItem xs="5" sm="4" lg="3">
+        <MudItem xs="12" sm="4" lg="3">
             <MudStack>
                 <StudentTextBoxSelector Students="@_students"
                                         SelectedStudents="_absentStudents"
diff --git a/WebApp/Components/Features/Students/Create.razor b/WebApp/Components/Features/Students/Create.razor
index 88968b2..b426cce 100644
--- a/WebApp/Components/Features/Students/Create.razor
+++ b/WebApp/Components/Features/Students/Create.razor
@@ -22,7 +22,7 @@
     
     <ValidationErrorDisplay Errors="_validationErrors" />
 
-    <MudPaper Elevation="2" Class="pa-6">
+    <MudPaper Elevation="2" Class="pa-3 pa-md-6">
         <MudText Typo="Typo.h5" Class="mb-4">Student Information</MudText>
         <MudGrid Spacing="3">
             <MudItem xs="12" sm="6">
diff --git a/WebApp/Components/Features/Students/Details.razor b/WebApp/Components/Features/Students/Details.razor
index bfde763..395a8da 100644
--- a/WebApp/Components/Features/Students/Details.razor
+++ b/WebApp/Components/Features/Students/Details.razor
@@ -26,7 +26,7 @@
     </ActionButtons>
 </PageHeader>
 
-<MudPaper Elevation="2" Class="pa-6">
+<MudPaper Elevation="2" Class="pa-3 pa-md-6">
     <MudText Typo="Typo.h5" Class="mb-4">Student Information</MudText>
     <MudGrid Spacing="3">
         <MudItem xs="12" sm="6" md="4">
diff --git a/WebApp/Components/Features/Students/Edit.razor b/WebApp/Components/Features/Students/Edit.razor
index 7dff7dd..0540e2f 100644
--- a/WebApp/Components/Features/Students/Edit.razor
+++ b/WebApp/Components/Features/Students/Edit.razor
@@ -32,7 +32,7 @@
         
         <MudGrid>
             <MudItem xs="12" sm="7">
-                <MudPaper Elevation="2" Class="pa-6">
+                <MudPaper Elevation="2" Class="pa-3 pa-md-6">
                     <MudTextField T="string" Label="First Name" @bind-Value="Student.FirstName" For="@(() => Student.FirstName)"></MudTextField>
                     <MudTextField T="string" Label="Last Name" @bind-Value="Student.LastName" For="@(() => Student.LastName)"></MudTextField>
                     <MudTextField T="string" Label="Email Adress" @bind-Value="Student.Email" For="@(() => Student.Email)"></MudTextField>
diff --git a/WebApp/Components/Features/Students/EventRanking.razor b/WebApp/Components/Features/Students/EventRanking.razor
index edb7687..22f7b31 100644
--- a/WebApp/Components/Features/Students/EventRanking.razor
+++ b/WebApp/Components/Features/Students/EventRanking.razor
@@ -18,7 +18,7 @@
 else
 {
     <MudStack Spacing="4">
-        <MudPaper Elevation="2" Class="pa-6">
+        <MudPaper Elevation="2" Class="pa-3 pa-md-6">
             <MudText Typo="Typo.h5" Class="mb-4">Students by Rank</MudText>
             <MudTable Items="_students" Hover="true" Striped="true" Breakpoint="Breakpoint.Sm" LoadingProgressColor="Color.Info">
         <HeaderContent>
@@ -64,7 +64,7 @@ else
             </MudTable>
         </MudPaper>
 
-        <MudPaper Elevation="2" Class="pa-6">
+        <MudPaper Elevation="2" Class="pa-3 pa-md-6">
             <MudText Typo="Typo.h5" Class="mb-4">Events by Student</MudText>
             <MudTable Items="_eventStudentRankings" Hover="true" Striped="true" Breakpoint="Breakpoint.Sm" LoadingProgressColor="Color.Info">
         <HeaderContent>
diff --git a/WebApp/Components/Features/Students/Index.razor b/WebApp/Components/Features/Students/Index.razor
index 5275d6c..3abf087 100644
--- a/WebApp/Components/Features/Students/Index.razor
+++ b/WebApp/Components/Features/Students/Index.razor
@@ -15,7 +15,7 @@
     </ActionButtons>
 </PageHeader>
 
-<MudPaper Elevation="2" Class="pa-6">
+<MudPaper Elevation="2" Class="pa-3 pa-md-6">
     <MudDataGrid T="Student"
                  ServerData="ServerReload"
                  @ref="_dataGrid"
@@ -30,7 +30,7 @@
             <PropertyColumn Property="@(e => e.LastName)" Title="Name" Sortable="true">
                 <CellTemplate>
                     <MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Spacing="1">
-                        <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
+                        <div class="d-flex align-center flex-wrap" style="gap: 0.25rem;">
                             <MudLink Href="@($"/students/details?id={context.Item.Id}&returnUrl=/students")"
                                      Underline="Underline.Hover"
                                      Color="Color.Primary">
@@ -40,7 +40,7 @@
                             {
                                 <MudChip T="string" Size="Size.Small" Icon="@(AppIcons.OfficerRoleIcon(context.Item.OfficerRole.Value))">@context.Item.OfficerRole</MudChip>
                             }
-                        </MudStack>
+                        </div>
                         <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
                             <IconButtonWithTooltip Icon="@Icons.Material.Filled.Edit"
                                                    TooltipText="Edit"
diff --git a/WebApp/Components/Features/Students/Registration.razor b/WebApp/Components/Features/Students/Registration.razor
index f6693f6..2382c1a 100644
--- a/WebApp/Components/Features/Students/Registration.razor
+++ b/WebApp/Components/Features/Students/Registration.razor
@@ -19,7 +19,7 @@
     </ActionButtons>
 </PageHeader>
 
-<MudPaper Elevation="2" Class="pa-6">
+<MudPaper Elevation="2" Class="pa-3 pa-md-6">
     <MudText Typo="Typo.body2" Class="mb-2">
         <MudIcon Icon="@AppIcons.Captain" Size="Size.Small" /> = Team Captain
     </MudText>
@@ -78,8 +78,9 @@
                     var teamsToDisplay = _showRegionalOnly
                         ? context.Item.Teams.Where(t => t?.Event is { RegionalEvent: true }).OrderBy(t => t.Event.Name)
                         : context.Item.Teams.Where(t => t?.Event != null).OrderBy(t => t.Event.Name);
-
-                    foreach (var team in teamsToDisplay)
+                }
+                <div class="d-flex flex-wrap" style="gap: 0.25rem;">
+                    @foreach (var team in teamsToDisplay)
                     {
                         var isCaptain = team.Captain != null && team.Captain.Equals(context.Item.Student);
                         var teamMembers = string.Join(", ", team.Students.Select(s => s.FirstName));
@@ -97,7 +98,7 @@
                             </MudChip>
                         </MudTooltip>
                     }
-                }
+                </div>
             </CellTemplate>
         </TemplateColumn>
     </Columns>
diff --git a/WebApp/Components/Features/Teams/Assignment.razor b/WebApp/Components/Features/Teams/Assignment.razor
index 22b079d..4c15082 100644
--- a/WebApp/Components/Features/Teams/Assignment.razor
+++ b/WebApp/Components/Features/Teams/Assignment.razor
@@ -21,7 +21,7 @@
     </ActionButtons>
 </PageHeader>
 
-<MudPaper Elevation="2" Class="pa-6 mt-4">
+<MudPaper Elevation="2" Class="pa-3 pa-md-6 mt-4">
     <MudGrid>
         <MudItem Style="width:160px;">
             <MudNumericField @bind-Value="_parameters.TeamSizeLimit"
@@ -117,7 +117,7 @@
     <MudButton Class="ma-3" OnClick="Solve" Variant="Variant.Filled" Color="Color.Primary" Disabled="@_isSolving">Solve</MudButton>
 </MudPaper>
 
-<MudPaper Elevation="2" Class="pa-6 mt-4">
+<MudPaper Elevation="2" Class="pa-3 pa-md-6 mt-4">
     <MudGrid>
         <MudItem xs="12" lg="8">
             <MudText Typo="Typo.h5" Class="mb-4">Students</MudText>
diff --git a/WebApp/Components/Features/Teams/Components/TeamStudents.razor b/WebApp/Components/Features/Teams/Components/TeamStudents.razor
index 6f3e4f5..58cba4a 100644
--- a/WebApp/Components/Features/Teams/Components/TeamStudents.razor
+++ b/WebApp/Components/Features/Teams/Components/TeamStudents.razor
@@ -1,35 +1,37 @@
 @using WebApp.Models
-@foreach (var student in
-          Team.Students
-              .OrderBy(e =>
-                  e.EventRankings
-                      .Find(er => er.EventDefinition == Team.Event)?.Rank ?? 10)
-              .ThenBy(s => s.Grade + s.TsaYear))
-{
-    var eventRank =
-        student.EventRankings
-            .Find(e => e.EventDefinition == Team.Event)?.Rank;
-    var color = AppIcons.RankedEventColor(eventRank ?? 0);
-    var captain = Team.Captain != null && Team.Captain.Equals(student);
-    var rankLabel = eventRank.HasValue ? $"Rank {eventRank}" : "Unranked";
+<div class="d-flex flex-wrap" style="gap: 0.25rem;">
+    @foreach (var student in
+              Team.Students
+                  .OrderBy(e =>
+                      e.EventRankings
+                          .Find(er => er.EventDefinition == Team.Event)?.Rank ?? 10)
+                  .ThenBy(s => s.Grade + s.TsaYear))
+    {
+        var eventRank =
+            student.EventRankings
+                .Find(e => e.EventDefinition == Team.Event)?.Rank;
+        var color = AppIcons.RankedEventColor(eventRank ?? 0);
+        var captain = Team.Captain != null && Team.Captain.Equals(student);
+        var rankLabel = eventRank.HasValue ? $"Rank {eventRank}" : "Unranked";
 
-    <MudTooltip Text="@rankLabel">
-        <MudChip T="string"
-                 Size="Size.Medium"
-                 Variant="Variant.Outlined"
-                 Class="mx-1 my-1">
-            @if (eventRank.HasValue)
-            {
-                <span style="@($"display: inline-block; width: 12px; height: 12px; border-radius: 50%; background-color: {color}; margin-right: 6px;")")></span>
-            }
-            @student.FirstName
-            @if (captain && Team.Event.EventFormat != EventFormat.Individual)
-            {
-                <MudIcon Icon="@AppIcons.Captain" Size="Size.Small" Style="margin-left: 4px;" />
-            }
-        </MudChip>
-    </MudTooltip>
-}
+        <MudTooltip Text="@rankLabel">
+            <MudChip T="string"
+                     Size="Size.Medium"
+                     Variant="Variant.Outlined"
+                     Class="mx-1 my-1">
+                @if (eventRank.HasValue)
+                {
+                    <span style="@($"display: inline-block; width: 12px; height: 12px; border-radius: 50%; background-color: {color}; margin-right: 6px;")")"></span>
+                }
+                @student.FirstName
+                @if (captain && Team.Event.EventFormat != EventFormat.Individual)
+                {
+                    <MudIcon Icon="@AppIcons.Captain" Size="Size.Small" Style="margin-left: 4px;" />
+                }
+            </MudChip>
+        </MudTooltip>
+    }
+</div>
 
 @code {
     [Parameter]
diff --git a/WebApp/Components/Features/Teams/Create.razor b/WebApp/Components/Features/Teams/Create.razor
index 2def5a7..46a1bb5 100644
--- a/WebApp/Components/Features/Teams/Create.razor
+++ b/WebApp/Components/Features/Teams/Create.razor
@@ -30,7 +30,7 @@
     
     <MudGrid>
         <MudItem xs="12" sm="7">
-            <MudPaper Elevation="2" Class="pa-6">
+            <MudPaper Elevation="2" Class="pa-3 pa-md-6">
                 <MudSelect T="EventDefinition" Value="@Team.Event" ValueChanged="OnEventChanged" Label="Event">
 
                     @foreach (var evt in _events)
diff --git a/WebApp/Components/Features/Teams/Details.razor b/WebApp/Components/Features/Teams/Details.razor
index ac9be43..fbee908 100644
--- a/WebApp/Components/Features/Teams/Details.razor
+++ b/WebApp/Components/Features/Teams/Details.razor
@@ -29,7 +29,7 @@
     </ActionButtons>
 </PageHeader>
 
-<MudPaper Elevation="2" Class="pa-6">
+<MudPaper Elevation="2" Class="pa-3 pa-md-6">
     <MudText Typo="Typo.h5" Class="mb-4">Team Information</MudText>
     <MudGrid Spacing="3">
         <MudItem xs="12" sm="6">
diff --git a/WebApp/Components/Features/Teams/Edit.razor b/WebApp/Components/Features/Teams/Edit.razor
index cb48a9e..06f083d 100644
--- a/WebApp/Components/Features/Teams/Edit.razor
+++ b/WebApp/Components/Features/Teams/Edit.razor
@@ -29,7 +29,7 @@
         
         <MudGrid>
             <MudItem xs="12" sm="7">
-                <MudPaper Elevation="2" Class="pa-6">
+                <MudPaper Elevation="2" Class="pa-3 pa-md-6">
                     <StudentToggleSelector Students="@_students"
                                           @bind-SelectedStudents="_selectedStudents"
                                           Title="Students"
diff --git a/WebApp/Components/Features/Teams/Goals.razor b/WebApp/Components/Features/Teams/Goals.razor
index bc3cf98..22e29d6 100644
--- a/WebApp/Components/Features/Teams/Goals.razor
+++ b/WebApp/Components/Features/Teams/Goals.razor
@@ -16,7 +16,7 @@
 }
 else
 {
-    <MudPaper Elevation="2" Class="pa-6">
+    <MudPaper Elevation="2" Class="pa-3 pa-md-6">
         @foreach (var student in _students)
         {
             <MudContainer Class="pagebreak">
diff --git a/WebApp/Components/Features/Teams/Index.razor b/WebApp/Components/Features/Teams/Index.razor
index d542039..04a3d59 100644
--- a/WebApp/Components/Features/Teams/Index.razor
+++ b/WebApp/Components/Features/Teams/Index.razor
@@ -21,7 +21,7 @@
     </ActionButtons>
 </PageHeader>
 
-<MudPaper Elevation="2" Class="pa-6">
+<MudPaper Elevation="2" Class="pa-3 pa-md-6">
     <MudDataGrid T="Team"
                  ServerData="ServerReload"
                  @ref="_dataGrid"
diff --git a/WebApp/Components/Shared/Layout/MainLayout.razor b/WebApp/Components/Shared/Layout/MainLayout.razor
index 4e444f1..cabd366 100644
--- a/WebApp/Components/Shared/Layout/MainLayout.razor
+++ b/WebApp/Components/Shared/Layout/MainLayout.razor
@@ -9,7 +9,9 @@
 <MudLayout>
     <MudAppBar Class="no-print">
         <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
-        TSA Chapter Organizer - @Configuration["ChapterSettings:Name"]
+        <MudText Typo="Typo.h6" Class="text-truncate appbar-title">
+            TSA Chapter Organizer - @Configuration["ChapterSettings:Name"]
+        </MudText>
         <MudSpacer />
         <AuthorizeView>
             <form action="Auth/CookieLogout" method="post">
diff --git a/WebApp/wwwroot/app.css b/WebApp/wwwroot/app.css
index 5349abd..31f9bfc 100644
--- a/WebApp/wwwroot/app.css
+++ b/WebApp/wwwroot/app.css
@@ -56,6 +56,19 @@
     display: flex;
     gap: 0.5rem;
     align-items: center;
+    flex-wrap: wrap;
+}
+
+@media (max-width: 600px) {
+    .page-header-actions {
+        width: 100%;
+        margin-top: 0.5rem;
+    }
+    
+    .page-header > div > div:first-of-type {
+        flex-direction: column;
+        align-items: flex-start !important;
+    }
 }
 
 .form-actions {
@@ -66,6 +79,17 @@
     margin-bottom: 1rem;
 }
 
+@media (max-width: 600px) {
+    .form-actions {
+        flex-direction: column;
+        width: 100%;
+    }
+    
+    .form-actions > * {
+        width: 100%;
+    }
+}
+
 .icon-button-hover-error:hover {
     color: var(--mud-palette-error) !important;
 }
@@ -87,4 +111,21 @@
     to {
         opacity: 1;
     }
+}
+
+/* Toolbar title responsive styling */
+.appbar-title {
+    max-width: calc(100vw - 150px);
+}
+
+@media (max-width: 600px) {
+    .appbar-title {
+        font-size: 0.875rem;
+        max-width: calc(100vw - 120px);
+    }
+    
+    /* Reduce base font size on mobile */
+    body {
+        font-size: 0.875rem;
+    }
 }
\ No newline at end of file