Refactor SessionCard layout to vertically stack checkbox with busy indicator

Author: chriswritescode-dev

frontend/src/components/session/SessionCard.tsx

@@ -38,27 +38,29 @@ export const SessionCard = ({
     >
       <div className="flex items-start justify-between gap-2">
         <div className="flex items-start gap-2 flex-1 min-w-0">
-          <Checkbox
-            checked={isSelected}
-            onCheckedChange={(checked) => {
-              onToggleSelection(checked === true);
-            }}
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-            className="w-5 h-5 flex-shrink-0 mt-0.5"
-          />
+          <div className="flex flex-col items-center gap-3 flex-shrink-0">
+            <Checkbox
+              checked={isSelected}
+              onCheckedChange={(checked) => {
+                onToggleSelection(checked === true);
+              }}
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+              className="w-5 h-5 flex-shrink-0"
+            />
+            {isSessionBusy && (
+              <span className="relative flex h-2.5 w-2.5 flex-shrink-0">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+                <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500"></span>
+              </span>
+            )}
+          </div>
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2">
               <h3 className="text-base font-semibold text-orange-600 dark:text-orange-400 truncate">
                 {session.title || "Untitled Session"}
               </h3>
-              {isSessionBusy && (
-                <span className="relative flex h-2.5 w-2.5 flex-shrink-0">
-                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
-                  <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500"></span>
-                </span>
-              )}
             </div>
             <div className="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
               <span className="flex items-center gap-1">
@@ -79,4 +81,4 @@ export const SessionCard = ({
       </div>
     </Card>
   );
-};
+};