Move Active Projects widget into tasks column, 3 cards across

Projects now appear at the top of the tasks column directly above
the task sections, laid out in a fixed 3-column grid. The previous
full-width widget below the main grid has been removed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/views/HomeView.vue

@@ -315,6 +315,53 @@ function clearDashboardResponse() {
 
       <!-- Tasks column -->
       <div class="col-tasks">
+
+        <!-- Active Projects (3 across, above tasks) -->
+        <div v-if="activeProjects.length" class="projects-inline">
+          <div class="col-header">
+            <h2>Active Projects</h2>
+            <router-link to="/projects" class="see-all">See all</router-link>
+          </div>
+          <div class="projects-strip-inline">
+            <router-link
+              v-for="project in activeProjects"
+              :key="project.id"
+              :to="`/projects/${project.id}`"
+              class="project-mini-card"
+            >
+              <div class="project-mini-title">{{ project.title }}</div>
+              <template v-if="project.summary?.milestone_summary?.length">
+                <div
+                  v-for="(ms, i) in project.summary.milestone_summary.filter(m => m.status !== 'archived')"
+                  :key="ms.id"
+                  class="ms-row"
+                >
+                  <span class="ms-label">{{ ms.title }}</span>
+                  <div class="ms-track">
+                    <div
+                      class="ms-fill"
+                      :style="{ width: ms.pct + '%', background: milestoneColor(i) }"
+                    ></div>
+                  </div>
+                  <span class="ms-pct">{{ Math.round(ms.pct) }}%</span>
+                </div>
+              </template>
+              <div v-else-if="project.summary" class="project-mini-counts">
+                <span v-if="project.summary.task_counts.in_progress">
+                  {{ project.summary.task_counts.in_progress }} in progress
+                </span>
+                <span v-if="project.summary.task_counts.todo">
+                  {{ project.summary.task_counts.todo }} todo
+                </span>
+                <span v-if="!project.summary.task_counts.in_progress && !project.summary.task_counts.todo" class="muted">
+                  No open tasks
+                </span>
+              </div>
+              <div v-else class="project-mini-counts muted">Loading…</div>
+            </router-link>
+          </div>
+        </div>
+
         <div class="col-header">
           <h2>Tasks</h2>
           <router-link to="/tasks" class="see-all">See all</router-link>
@@ -433,52 +480,6 @@ function clearDashboardResponse() {
 
     </div>
 
-    <!-- Projects widget -->
-    <div v-if="activeProjects.length" class="projects-section">
-      <div class="col-header">
-        <h2>Active Projects</h2>
-        <router-link to="/projects" class="see-all">See all</router-link>
-      </div>
-      <div class="projects-strip">
-        <router-link
-          v-for="project in activeProjects"
-          :key="project.id"
-          :to="`/projects/${project.id}`"
-          class="project-mini-card"
-        >
-          <div class="project-mini-title">{{ project.title }}</div>
-          <template v-if="project.summary?.milestone_summary?.length">
-            <div
-              v-for="(ms, i) in project.summary.milestone_summary.filter(m => m.status !== 'archived')"
-              :key="ms.id"
-              class="ms-row"
-            >
-              <span class="ms-label">{{ ms.title }}</span>
-              <div class="ms-track">
-                <div
-                  class="ms-fill"
-                  :style="{ width: ms.pct + '%', background: milestoneColor(i) }"
-                ></div>
-              </div>
-              <span class="ms-pct">{{ Math.round(ms.pct) }}%</span>
-            </div>
-          </template>
-          <div v-else-if="project.summary" class="project-mini-counts">
-            <span v-if="project.summary.task_counts.in_progress">
-              {{ project.summary.task_counts.in_progress }} in progress
-            </span>
-            <span v-if="project.summary.task_counts.todo">
-              {{ project.summary.task_counts.todo }} todo
-            </span>
-            <span v-if="!project.summary.task_counts.in_progress && !project.summary.task_counts.todo" class="muted">
-              No open tasks
-            </span>
-          </div>
-          <div v-else class="project-mini-counts muted">Loading…</div>
-        </router-link>
-      </div>
-    </div>
-
   </main>
 </template>
 
@@ -653,14 +654,14 @@ function clearDashboardResponse() {
   gap: 0.6rem;
 }
 
-/* Projects widget */
+/* Projects inline (inside tasks column) */
-.projects-section {
+.projects-inline {
-  margin-top: 2rem;
+  margin-bottom: 1.5rem;
 }
-.projects-strip {
+.projects-strip-inline {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-template-columns: repeat(3, 1fr);
-  gap: 0.75rem;
+  gap: 0.6rem;
 }
 .project-mini-card {
   display: block;
@@ -745,6 +746,6 @@ function clearDashboardResponse() {
 @media (max-width: 768px) {
   .dashboard-grid { grid-template-columns: 1fr; }
   .notes-mini-grid { grid-template-columns: 1fr; }
-  .projects-strip { grid-template-columns: 1fr; }
+  .projects-strip-inline { grid-template-columns: 1fr; }
 }
 </style>