fix: move creation loading indicator outside active sessions grid

The loading overlay for instance creation was inside the active sessions
grid, which doesn't render when there are no active sessions. Moved the
overlay to the parent container so it's always visible during creation
regardless of existing sessions.

apps/web/src/pages/sessions.tsx

@@ -388,7 +388,23 @@ export const SessionsPage = () => {
           )}
 
           {/* Active Sessions */}
-          <div className="active-sessions-section">
+          <div className={`active-sessions-section ${createStatus === "creating" || loadingSessionId ? "dimmed" : ""}`}>
+            {createStatus === "creating" && (
+              <div className="loading-overlay">
+                <div className="loading-content">
+                  <Icon name="loading" size="lg" />
+                  <p>{createProgress || "Creating session..."}</p>
+                </div>
+              </div>
+            )}
+            {loadingSessionId && (
+              <div className="loading-overlay">
+                <div className="loading-content">
+                  <Icon name="loading" size="lg" />
+                  <p>{loadingAction || "Processing..."}</p>
+                </div>
+              </div>
+            )}
             <h2>
               Active Sessions
               {activeSessions.length > 0 && (
@@ -398,23 +414,7 @@ export const SessionsPage = () => {
             {activeSessions.length === 0 ? (
               <p className="muted">No active sessions</p>
             ) : (
-              <div className={`sessions-grid ${createStatus === "creating" || loadingSessionId ? "dimmed" : ""}`}>
-                {createStatus === "creating" && (
-                  <div className="loading-overlay">
-                    <div className="loading-content">
-                      <Icon name="loading" size="lg" />
-                      <p>{createProgress || "Creating session..."}</p>
-                    </div>
-                  </div>
-                )}
-                {loadingSessionId && (
-                  <div className="loading-overlay">
-                    <div className="loading-content">
-                      <Icon name="loading" size="lg" />
-                      <p>{loadingAction || "Processing..."}</p>
-                    </div>
-                  </div>
-                )}
+              <div className="sessions-grid">
                 {activeSessions.map((session) => (
                   <div className="card session-card" key={session.id}>
                     <div className="session-info">

apps/web/src/styles.css

@@ -2652,9 +2652,15 @@ a.nav-item,
 }
 
 .active-sessions-section {
+  position: relative;
   margin-bottom: var(--space-6);
 }
 
+.active-sessions-section.dimmed {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
 .active-sessions-section h2 {
   display: flex;
   align-items: center;