From 5f9af0812ff76c1527deb1ae99d49ec3dacf1b74 Mon Sep 17 00:00:00 2001
From: Cory Pride <cory.pride83@gmail.com>
Date: Fri, 5 Jun 2026 16:37:40 -0500
Subject: [PATCH] fix: CSS and a11y in class-detail components

---
 .../pages/class-detail/ClassNotFoundCard.tsx  |  2 +-
 .../pages/class-detail/LoadingSkeleton.tsx    |  4 +--
 .../src/pages/class-detail/SessionRow.tsx     | 29 ++++++++++---------
 3 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/frontend/src/pages/class-detail/ClassNotFoundCard.tsx b/frontend/src/pages/class-detail/ClassNotFoundCard.tsx
index 361972494..e254a95a5 100644
--- a/frontend/src/pages/class-detail/ClassNotFoundCard.tsx
+++ b/frontend/src/pages/class-detail/ClassNotFoundCard.tsx
@@ -6,7 +6,7 @@ interface ClassNotFoundCardProps {
 
 export function ClassNotFoundCard({ onBack }: ClassNotFoundCardProps) {
     return (
-        <div className="bg-surface-hover flex items-center justify-center">
+        <div className="flex min-h-screen items-center justify-center bg-surface-hover">
             <div className="card-block p-8 text-center max-w-md">
                 <h2 className="text-xl font-semibold text-brand-dark mb-2">
                     Class Not Found
diff --git a/frontend/src/pages/class-detail/LoadingSkeleton.tsx b/frontend/src/pages/class-detail/LoadingSkeleton.tsx
index 391ca3a05..51d506e69 100644
--- a/frontend/src/pages/class-detail/LoadingSkeleton.tsx
+++ b/frontend/src/pages/class-detail/LoadingSkeleton.tsx
@@ -8,7 +8,7 @@ export function LoadingSkeleton() {
                     <Skeleton className="h-8 w-32 mb-4" />
                     <Skeleton className="h-10 w-80 mb-3" />
                     <Skeleton className="h-5 w-48 mb-4" />
-                    <div className="grid grid-cols-5 gap-4">
+                    <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
                         {Array.from({ length: 5 }).map((_, i) => (
                             <Skeleton key={i} className="h-20 rounded-lg" />
                         ))}
@@ -16,7 +16,7 @@ export function LoadingSkeleton() {
                 </div>
             </div>
             <div className="max-w-7xl mx-auto px-6 py-6">
-                <div className="grid grid-cols-3 gap-6 mb-6">
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
                     {Array.from({ length: 3 }).map((_, i) => (
                         <Skeleton key={i} className="h-40 rounded-lg" />
                     ))}
diff --git a/frontend/src/pages/class-detail/SessionRow.tsx b/frontend/src/pages/class-detail/SessionRow.tsx
index 4e4842983..137381055 100644
--- a/frontend/src/pages/class-detail/SessionRow.tsx
+++ b/frontend/src/pages/class-detail/SessionRow.tsx
@@ -78,24 +78,16 @@ export function SessionRow({
 
     const getIcon = () => {
         if (treatAsFrom)
-            return (
-                <CalendarClock className="size-5 text-gray-400 flex-shrink-0" />
-            );
+            return <CalendarClock className="size-5 text-gray-400 shrink-0" />;
         if (treatAsTo)
-            return (
-                <CalendarClock className="size-5 text-blue-700 flex-shrink-0" />
-            );
+            return <CalendarClock className="size-5 text-blue-700 shrink-0" />;
         if (isCancelled)
-            return (
-                <CalendarOff className="size-5 text-gray-500 flex-shrink-0" />
-            );
+            return <CalendarOff className="size-5 text-gray-500 shrink-0" />;
         if (hasAttendance)
-            return <CheckCircle className="size-5 text-brand flex-shrink-0" />;
+            return <CheckCircle className="size-5 text-brand shrink-0" />;
         if (isPast)
-            return (
-                <AlertCircle className="size-5 text-brand-gold flex-shrink-0" />
-            );
-        return <Calendar className="size-5 text-gray-400 flex-shrink-0" />;
+            return <AlertCircle className="size-5 text-brand-gold shrink-0" />;
+        return <Calendar className="size-5 text-gray-400 shrink-0" />;
     };
 
     const showCheckbox =
@@ -105,6 +97,15 @@ export function SessionRow({
     return (
         <div
             onClick={onClick}
+            role="button"
+            tabIndex={0}
+            onKeyDown={(e) => {
+                if (e.target !== e.currentTarget) return;
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    onClick();
+                }
+            }}
             className={`flex items-center justify-between p-4 rounded-lg border transition-colors cursor-pointer ${getBorderClass()}`}
         >
             <div className="flex items-center gap-4 min-w-0">