Overviews: create before publish-all; Home: the trend curves keep their dot

The Home table drew the one sparkline without its live dot, on the grounds
that a polled rollup's right edge is the last complete slice rather than this
instant. Identical curves reading differently is the worse trade, so the dot
is back everywhere and the cell keeps room for the half that hangs past the
curve.

frontend/src/components/Common/OverviewToolbar.tsx

@@ -104,6 +104,23 @@ export function OverviewToolbar({
         </Tooltip>
       )}
 
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <DialogTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className={ICON}
+              aria-label={createLabel}
+              data-testid={createTestId}
+            >
+              <Plus />
+            </Button>
+          </DialogTrigger>
+        </TooltipTrigger>
+        <TooltipContent>{createLabel}</TooltipContent>
+      </Tooltip>
+
       <Tooltip>
         <TooltipTrigger asChild>
           {/* A disabled button gets no pointer events, so the tooltip that
@@ -128,23 +145,6 @@ export function OverviewToolbar({
             : `Publish ${draftCount} unpublished change${draftCount === 1 ? "" : "s"}`}
         </TooltipContent>
       </Tooltip>
-
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <DialogTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className={ICON}
-              aria-label={createLabel}
-              data-testid={createTestId}
-            >
-              <Plus />
-            </Button>
-          </DialogTrigger>
-        </TooltipTrigger>
-        <TooltipContent>{createLabel}</TooltipContent>
-      </Tooltip>
     </div>
   )
 }

frontend/src/components/Health/HealthOverview.tsx

@@ -40,9 +40,9 @@ function Tile({
  *
  * Sixty slices of whatever window is selected, so the curve stays the same
  * width and only its resolution moves. The same curve the node panel and the
- * edge popover draw, in the chart ramp this page's other graphs use. No live
- * dot: the rollups are polled, so the right edge is the last completed slice
- * rather than this instant.
+ * edge popover draw, dot included, in the chart ramp this page's other graphs
+ * use. The dot marks the newest slice rather than this instant — the rollups
+ * are polled, so that slice is the last complete one.
  */
 function Spark({ counts }: { counts: number[] }) {
   const points: HistoryPoint[] = counts.map((value, index) => ({
@@ -57,7 +57,6 @@ function Spark({ counts }: { counts: number[] }) {
       points={points}
       color="var(--chart-1)"
       height="h-6"
-      dot={false}
       readout={false}
     />
   )
@@ -205,7 +204,9 @@ export function HealthOverview({
                   <td className="whitespace-nowrap px-3 py-2 text-center">
                     {si(row.avg_lag_ms)} ms
                   </td>
-                  <td className="py-2 pl-3 text-right">
+                  {/* The dot straddles the curve's right edge, so the cell
+                      keeps a little room for the half that hangs out. */}
+                  <td className="py-2 pr-2 pl-3 text-right">
                     <Spark counts={row.spark} />
                   </td>
                 </tr>