feat(web): refine overview activity layout (#61)

Author: Cheerego7

web/src/overview-page.test.ts

@@ -35,6 +35,23 @@ describe("OverviewPage", () => {
     expect(markup).toMatch(/href="\/runs\?service=gmail"/);
   });
 
+  it("limits recent calls to seven providers", () => {
+    const providers = Array.from({ length: 8 }, (_, index) =>
+      provider(`service${index + 1}`, `Service ${index + 1}`, [action(`service${index + 1}.run`, true)]),
+    );
+    const runs = providers.map((item, index) => ({
+      ...run(`service-${index + 1}`, true),
+      service: item.service,
+      actionId: `${item.service}.run`,
+    }));
+
+    const markup = renderOverview({ ...overviewData, providers, runs });
+
+    expect(markup.match(/class="overview-recent-call-row"/g) ?? []).toHaveLength(7);
+    expect(markup).toContain("Service 7");
+    expect(markup).not.toContain("Service 8");
+  });
+
   it("renders service call trend without service navigation links", () => {
     const markup = renderOverview({
       ...overviewData,
@@ -76,6 +93,15 @@ describe("OverviewPage", () => {
     expect(markup).toMatch(/href="\/runs\?service=slack"/);
   });
 
+  it("renders call trend and recent calls in one overview activity row", () => {
+    const markup = renderOverview();
+
+    const activityRow = markup.match(/<section class="content-grid overview-activity-grid">([\s\S]*?)<\/section>/)?.[1];
+
+    expect(activityRow ?? "").toContain("overview-call-trend-panel");
+    expect(activityRow ?? "").toContain("overview-recent-calls-panel");
+  });
+
   it("does not render duplicate overview metrics", () => {
     const markup = renderOverview();
 

web/src/overview-page.tsx

@@ -32,7 +32,7 @@ interface CapabilityStatusCellProps {
 type CapabilityStatusBadgeTone = "success" | "warning";
 
 const capabilityProviderIconLimit = 4;
-const recentCallLimit = 4;
+const recentCallLimit = 7;
 const callTrendDayCount = 30;
 const callTrendServiceLimit = 4;
 const callTrendColors = ["var(--chart-1)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)"] as const;
@@ -114,7 +114,7 @@ export function OverviewPage(props: OverviewPageProps): ReactNode {
         </Card>
       </section>
 
-      <section className="content-grid overview-call-trend-section">
+      <section className="content-grid overview-activity-grid">
         <Card className="list-panel overview-call-trend-panel">
           <div className="table-panel-heading">
             <h2>{t("overview.callTrend")}</h2>
@@ -184,9 +184,7 @@ export function OverviewPage(props: OverviewPageProps): ReactNode {
             </div>
           )}
         </Card>
-      </section>
 
-      <section className="content-grid overview-recent-calls-section">
         <Card className="list-panel overview-recent-calls-panel">
           <div className="table-panel-heading">
             <h2>{t("overview.recentCalls")}</h2>

web/src/style.css

@@ -755,10 +755,17 @@ h3 {
   grid-column: 1 / -1;
 }
 
-.overview-call-trend-panel,
-.overview-recent-calls-panel {
-  grid-column: 1 / -1;
+.overview-activity-grid {
+  align-items: stretch;
+  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.75fr);
+}
+
+.list-panel.overview-call-trend-panel,
+.list-panel.overview-recent-calls-panel {
+  display: flex;
+  flex-direction: column;
   gap: 0;
+  max-height: none;
   overflow: hidden;
   padding: 0;
 }
@@ -1029,6 +1036,10 @@ h3 {
 
 .overview-recent-call-list {
   display: grid;
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
 }
 
 .overview-recent-call-row {
@@ -1129,6 +1140,27 @@ h3 {
   color: var(--muted-foreground);
 }
 
+@media (min-width: 1121px) {
+  .overview-activity-grid {
+    height: clamp(320px, calc(100svh - 418px), 740px);
+  }
+
+  .overview-call-trend-panel,
+  .overview-recent-calls-panel,
+  .overview-call-trend-body {
+    min-height: 0;
+  }
+
+  .overview-call-trend-body {
+    flex: 1;
+  }
+
+  .overview-activity-grid .overview-call-trend-chart {
+    height: 100%;
+    min-height: 260px;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .overview-capability-static-icon,
   .overview-capability-provider-icon,
@@ -2449,6 +2481,12 @@ tr:last-child td {
   }
 }
 
+@media (max-width: 1120px) {
+  .overview-activity-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
 @media (max-width: 960px) {
   .app-shell {
     display: block;