fix: loading spinner positioning

Author: bradjin8

static/css/style.css

@@ -106,7 +106,10 @@ a { color: var(--link); text-decoration: none; }
 a:hover { text-decoration: underline; }
 
 /* ---------- Layout ---------- */
-.container { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem; flex: 1; }
+/* width: 100% is required here: body is display:flex + flex-direction:column,
+ * and auto horizontal margins (margin: 0 auto) suppress align-items:stretch,
+ * so without an explicit width the container collapses to content width. */
+.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem; flex: 1; }
 
 /* ---------- Navbar ---------- */
 .navbar {
@@ -297,10 +300,24 @@ h3 { font-size: 1.15rem; font-weight: 600; }
 .dropdown-item:hover { background: var(--bg-hover); text-decoration: none; }
 
 /* ---------- Loading ---------- */
-.loading { display: flex; flex-direction: column; align-items: center; padding: 3rem 0; gap: 1rem; }
+.loading,
+.loading-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: 1rem;
+  text-align: center;
+}
+.loading { padding: 3rem 0; }
+.loading-center { color: var(--text-muted); font-size: 0.9rem; }
 .spinner {
+  display: block;
+  flex-shrink: 0;
   width: 2rem;
   height: 2rem;
+  margin-inline: auto;
   border: 3px solid var(--border);
   border-top-color: var(--spinner);
   border-radius: 50%;
@@ -324,7 +341,17 @@ h3 { font-size: 1.15rem; font-weight: 600; }
  * URL inside .main-content would push the column wider than 1fr — overflowing
  * the viewport on the right. min-width: 0 lets the column shrink and lets the
  * existing overflow-x: auto on .prose pre handle the scroll inside the bubble. */
-.main-content { min-width: 0; }
+/* min-height prevents the right column from collapsing during lazy-load (issue #84). */
+.main-content { min-width: 0; min-height: 60vh; }
+
+/* Loading state: full-width cell; .loading-center centers spinner + label. */
+.main-content.is-loading {
+  width: 100%;
+  min-height: 60vh;
+}
+.main-content.is-loading .loading-center {
+  min-height: 60vh;
+}
 
 /* ---------- Sidebar ---------- */
 .sidebar {
@@ -358,6 +385,13 @@ h3 { font-size: 1.15rem; font-weight: 600; }
 .sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
 .sidebar::-webkit-scrollbar-track { background: transparent; }
 
+/* Placeholder shown in the sidebar column while summary tabs are fetching */
+.sidebar-loading {
+  width: 100%;
+  padding: 1.5rem 0;
+  opacity: 0.5;
+}
+
 /* Scroll hint at the bottom */
 .sidebar-scroll-hint {
   text-align: center;

templates/workspace.html

@@ -39,17 +39,17 @@ <h2 id="project-name">Loading...</h2>
     <p class="text-sm text-muted" id="convo-count"></p>
   </div>
 
-  <div id="loading" class="loading">
-    <div class="spinner"></div>
-    <p>Loading conversations...</p>
-  </div>
-
-  <!-- Content grid -->
-  <div id="content-grid" class="workspace-grid" style="display:none">
-    <div class="sidebar" id="sidebar"></div>
-    <div class="main-content" id="main-content">
-      <div class="card" style="padding:2rem;text-align:center">
-        <p class="text-muted">No conversation selected</p>
+  <!-- Content grid — always in layout so column widths never collapse -->
+  <div id="content-grid" class="workspace-grid">
+    <div class="sidebar" id="sidebar">
+      <div class="sidebar-loading loading-center">
+        <div class="spinner" style="width:1.25rem;height:1.25rem;border-width:2px"></div>
+      </div>
+    </div>
+    <div class="main-content is-loading" id="main-content">
+      <div class="loading-center">
+        <div class="spinner"></div>
+        <p>Loading conversations…</p>
       </div>
     </div>
   </div>
@@ -78,8 +78,6 @@ <h2 id="project-name">Loading...</h2>
       document.getElementById('project-hash').textContent = WORKSPACE_ID;
     }
 
-    document.getElementById('loading').style.display = 'none';
-    document.getElementById('content-grid').style.display = 'grid';
     document.getElementById('convo-count').textContent = `${allTabs.length} conversations`;
 
     renderSidebar();
@@ -92,7 +90,11 @@ <h2 id="project-name">Loading...</h2>
       selectTab(allTabs[0].id);
     }
   } catch (e) {
-    document.getElementById('loading').innerHTML = '<p class="text-danger">Failed to load workspace.</p>';
+    const main = document.getElementById('main-content');
+    main.classList.remove('is-loading');
+    main.innerHTML =
+      '<div class="card" style="padding:2rem;text-align:center"><p class="text-danger">Failed to load workspace.</p></div>';
+    document.getElementById('sidebar').innerHTML = '';
   }
 });
 
@@ -143,8 +145,10 @@ <h2 id="project-name">Loading...</h2>
     selectedTab = summary;
     tabCache[id] = summary;
   } else {
-    document.getElementById('main-content').innerHTML =
-      '<div class="card" style="padding:2rem;text-align:center"><div class="spinner"></div><p>Loading conversation…</p></div>';
+    const main = document.getElementById('main-content');
+    main.classList.add('is-loading');
+    main.innerHTML =
+      '<div class="loading-center" style="min-height:60vh"><div class="spinner"></div><p>Loading conversation…</p></div>';
     try {
       const res = await fetch(`/api/workspaces/${WORKSPACE_ID}/tabs/${id}`);
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
@@ -154,7 +158,9 @@ <h2 id="project-name">Loading...</h2>
       tabCache[id] = data.tab;
       selectedTab = data.tab;
     } catch (e) {
-      document.getElementById('main-content').innerHTML =
+      const main = document.getElementById('main-content');
+      main.classList.remove('is-loading');
+      main.innerHTML =
         `<div class="card" style="padding:2rem;text-align:center"><p class="text-danger">Failed to load conversation: ${escapeHtml(e.message)}</p></div>`;
       return;
     }
@@ -170,6 +176,7 @@ <h2 id="project-name">Loading...</h2>
 
 function renderChat(tab) {
   const main = document.getElementById('main-content');
+  main.classList.remove('is-loading');
   const bubbles = (tab.bubbles || []).filter(b => b.text && b.text.trim());
 
   let html = `<div class="card" style="padding:1.5rem">