Fix claude css line issue

Author: clean6378-max-it

static/css/style.css

@@ -279,6 +279,37 @@ h3 { font-size: 1.15rem; font-weight: 600; }
   flex-wrap: wrap;
 }
 
+/* Projects home: title + actions on one row; intro + last export on the next row (same baseline). */
+.page-header--projects {
+  flex-direction: column;
+  align-items: stretch;
+}
+.page-header--projects .page-header__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+.page-header--projects .page-header__subrow {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+.page-header--projects .page-header__intro {
+  margin: 0;
+  flex: 1 1 12rem;
+}
+.page-header--projects .page-header__export-meta {
+  flex: 0 1 auto;
+  text-align: right;
+}
+.page-header--projects .page-header__export-meta p {
+  margin: 0;
+}
+
 /* ---------- Utility ---------- */
 .flex-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
 

static/js/projects.js

@@ -20,10 +20,10 @@ export async function showProjects() {
     loadingBar.start();
 
     try {
-        const [projRes, stateRes] = await Promise.all([
-            fetch('/api/projects'),
-            fetch('/api/export/state').catch(() => null),
-        ]);
+        // Load projects first. Do not Promise.all with /api/export/state: that endpoint
+        // takes a file lock; if it blocks (stale lock, slow disk), the UI would hang here
+        // forever even though /api/projects already succeeded.
+        const projRes = await fetch('/api/projects');
         if (!projRes.ok) {
             let msg = `Failed to load projects (${projRes.status})`;
             try { const body = await projRes.json(); if (body.error) msg = body.error; } catch { try { msg = await projRes.text() || msg; } catch { /* ignore */ } }
@@ -32,9 +32,9 @@ export async function showProjects() {
             return;
         }
         const projects = await projRes.json();
-        loadingBar.done();
 
         if (!projects.length) {
+            loadingBar.done();
             smoothSet(content, '<div class="empty-state">No Claude Code projects found.<br>Make sure Claude Code has been used on this machine.</div>');
             return;
         }
@@ -44,15 +44,25 @@ export async function showProjects() {
 
         let lastExportHtml = '';
         let hasPreviousExport = false;
-        if (stateRes) {
+        let stateRes = null;
+        const exportCtrl = new AbortController();
+        const exportTid = setTimeout(() => exportCtrl.abort(), 5000);
+        try {
+            stateRes = await fetch('/api/export/state', { signal: exportCtrl.signal });
+        } catch {
+            /* timeout or network — still render project list */
+        } finally {
+            clearTimeout(exportTid);
+        }
+        if (stateRes && stateRes.ok) {
             try {
                 const exportState = await stateRes.json();
                 if (exportState.last_export_time) {
                     const d = new Date(exportState.last_export_time);
                     if (!isNaN(d.getTime())) {
                         hasPreviousExport = true;
                         const sessionCount = Math.max(0, parseInt(exportState.last_export_session_count ?? exportState.export_count ?? 0, 10) || 0);
-                        lastExportHtml = `<p class="text-muted text-sm" style="margin:0">Last export: ${d.toLocaleString()} (${sessionCount} sessions in last export)</p>`;
+                        lastExportHtml = `<p class="text-muted text-sm">Last export: ${d.toLocaleString()} (${sessionCount} sessions in last export)</p>`;
                     }
                 }
             } catch(e) {}
@@ -65,20 +75,20 @@ export async function showProjects() {
               </button>`
             : '';
 
-        let html = `<div class="page-header">
-            <div>
+        let html = `<div class="page-header page-header--projects">
+            <div class="page-header__top">
                 <h1>Projects</h1>
-                <p class="text-muted">Browse your Claude Code conversations by project. Click on a project to view its sessions.</p>
-            </div>
-            <div style="display:flex;flex-direction:column;align-items:flex-end;gap:0.4rem">
                 <div class="btn-group">
                     ${sinceBtnHtml}
                     <button class="btn btn-outline btn-sm" id="btn-export-all" onclick="bulkExport('all')">
                         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                         Export all
                     </button>
                 </div>
-                ${lastExportHtml}
+            </div>
+            <div class="page-header__subrow">
+                <p class="text-muted page-header__intro">Browse your Claude Code conversations by project. Click on a project to view its sessions.</p>
+                ${lastExportHtml ? `<div class="page-header__export-meta">${lastExportHtml}</div>` : ''}
             </div>
         </div>`;
 
@@ -128,6 +138,7 @@ export async function showProjects() {
             html += `</tbody></table></div></div>`;
         }
 
+        loadingBar.done();
         smoothSet(content, html);
     } catch (e) {
         loadingBar.done();