alignment changes

src/api/groupLessons.ts

@@ -96,8 +96,8 @@ export interface UpcomingGroupLessonsApiResponse {
 
 export interface GroupLessonsFilters {
   coachId?: number;
-  level?: number;
-  radiusMiles?: number;
+  level?: string | number;
+  radius?: number;
   dateStart?: string;
   dateEnd?: string;
   q?: string;

src/pages/GroupLessonsPage.css

@@ -20,6 +20,22 @@
   white-space: nowrap;
 }
 
+.group-lessons-page .fc-header__title {
+  font-size: 28px;
+  line-height: 1.2;
+  font-weight: 700;
+  letter-spacing: normal;
+}
+
+.group-lessons-page .fc-header__description {
+  font-size: 16px;
+  line-height: 1.4;
+}
+
+.group-lessons-page .fc-header {
+  margin-bottom: 16px;
+}
+
 @media (max-width: 640px) {
   .group-lessons-page .fc-header__description {
     white-space: normal;
@@ -33,7 +49,8 @@
 
 @media (min-width: 1024px) {
   .group-lessons-page__inner {
-    padding-bottom: 88px;
+    padding: 32px 32px 88px;
+    box-sizing: border-box;
   }
 }
 
@@ -1023,17 +1040,18 @@
 
   .group-lessons-mobile-hero h1 {
     margin: 0;
-    font-size: 24px;
-    font-weight: 800;
+    font-size: 18px;
+    line-height: 1.2;
+    font-weight: 700;
     color: var(--fc-color-text-primary);
-    letter-spacing: -0.03em;
+    letter-spacing: normal;
   }
 
   .group-lessons-mobile-hero p {
     margin: 0;
     font-size: 13px;
     color: var(--fc-color-text-secondary);
-    line-height: 1.35;
+    line-height: 1.4;
     white-space: nowrap;
   }
 

src/pages/GroupLessonsPage.tsx

@@ -30,7 +30,20 @@ import "../components/coaches/coaches.css";
 import "./GroupLessonsPage.css";
 
 const DEFAULT_LOCATION = "San Francisco, CA";
-const radiusOptions = ["All", "1 mi", "3 mi", "5 mi", "10 mi", "20 mi"];
+const radiusOptions = [
+  "All",
+  "1 mi",
+  "3 mi",
+  "5 mi",
+  "10 mi",
+  "20 mi",
+  "30 mi",
+  "50 mi",
+  "75 mi",
+  "100 mi",
+  "150 mi",
+  "200 mi",
+];
 const DEFAULT_RADIUS_OPTION = "10 mi";
 
 const parseRadius = (radius: string) => {
@@ -46,6 +59,15 @@ const formatLevelRange = (level: number) => {
   return `${level.toFixed(1)} - ${upperBound}`;
 };
 
+const LEVEL_FILTER_LABELS: Record<string, string> = {
+  "2.5": "Beginner (NTRP 2.5)",
+  "3.0": "Advanced Beginner (NTRP 3.0)",
+  "3.5": "Intermediate (NTRP 3.5)",
+  "4.0": "Advanced (NTRP 4.0)",
+  "4.5": "Advanced Plus (NTRP 4.5)",
+  "5.0": "Expert (NTRP 5.0)",
+};
+
 const toIsoDate = (date: Date) => {
   return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
     .toISOString()
@@ -686,8 +708,8 @@ const GroupLessonsPage = () => {
       setIsLoading(true);
       setLoadError(null);
 
-      const parsedLevel =
-        levelFilter === "All levels" ? undefined : Number.parseFloat(levelFilter);
+      const selectedLevelLabel =
+        levelFilter === "All levels" ? undefined : LEVEL_FILTER_LABELS[levelFilter];
       const radiusMiles = parseRadius(selectedRadius);
       const dateRange =
         dateFilter.type === "all"
@@ -706,8 +728,8 @@ const GroupLessonsPage = () => {
           ...(resolvedPosition ? { position: resolvedPosition } : {}),
           filters: {
             coachId: selectedCoachId,
-            level: Number.isFinite(parsedLevel ?? NaN) ? parsedLevel : undefined,
-            radiusMiles:
+            level: selectedLevelLabel,
+            radius:
               useLocationFilter && Number.isFinite(radiusMiles) ? radiusMiles : undefined,
             ...dateRange,
           },
@@ -1261,10 +1283,10 @@ const GroupLessonsPage = () => {
 
           <section aria-labelledby="group-lessons-results-heading" className="group-lessons-results">
             <div className="group-lessons-results__header">
-              <div>
+              {/* <div>
                 <h2 id="group-lessons-results-heading">Available sessions nearby</h2>
                 <p className="group-lessons-results__meta">{resultsSummary}</p>
-              </div>
+              </div> */}
               <div className="group-lessons-results__sort">
                 <span>Sort by</span>
                 <label className="group-lessons-results__sort-select">

src/pages/MyCoachesPage.css

@@ -1,7 +1,7 @@
 .my-coaches {
-  padding: 32px 24px 64px;
-  max-width: 1100px;
-  margin: 0 auto;
+  width: 100%;
+  padding: 32px 32px 64px;
+  box-sizing: border-box;
 }
 
 .my-coaches__header {

src/screens/Player/PlayerCalendar/index.css

@@ -96,8 +96,8 @@
 }
 
 .schedule-page__body {
-  max-width: 920px;
-  margin: 0 auto;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .schedule-page__hero {
@@ -405,6 +405,10 @@
     padding-bottom: 0;
   }
 
+  .schedule-page__body {
+    padding: 32px 32px 0;
+  }
+
   .schedule-page__topbar {
     display: grid;
   }