Fix peak traffic chart to match Figma design

Overlay bars instead of positioning side by side, with transparent
hatched "Last month" bars on top of solid "This month" bars. Update
legend icons to circular. Add CLAUDE.md with dev server notes.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

CLAUDE.md

@@ -0,0 +1,8 @@
+# Claude Code Notes
+
+## Development Server
+
+Before starting the dev server, check if it's already running:
+- Use `lsof -i :6827` or check for existing background tasks
+- The dev server runs on port 6827 (may fall back to 6828 if port is in use)
+- Start with `bun run --cwd apps/publisher-dashboard dev` or `devenv up`

apps/publisher-dashboard/src/lib/components/dashboard/peak-traffic-chart.svelte

@@ -65,19 +65,19 @@ function hourToPercent(hour: number): number {
           {#each days as _, dayIndex}
             {@const thisMonth = thisMonthData[dayIndex]}
             {@const lastMonth = lastMonthData[dayIndex]}
-            <div class="relative">
+            <div class="relative flex justify-center">
-              <!-- This month bar (solid) -->
+              <!-- This month bar (solid) - rendered first, behind -->
               <div
-                class="absolute left-0 w-3 rounded-sm bg-muted-foreground/60"
+                class="absolute w-4 rounded-sm bg-muted-foreground/50"
                 style="
                   top: {hourToPercent(thisMonth.start)}%;
                   height: {hourToPercent(thisMonth.end - thisMonth.start)}%;
                 "
               ></div>
 
-              <!-- Last month bar (hatched) -->
+              <!-- Last month bar (hatched) - rendered second, overlaid on top -->
               <div
-                class="absolute left-4 w-3 overflow-hidden rounded-sm"
+                class="absolute w-4 overflow-hidden rounded-sm"
                 style="
                   top: {hourToPercent(lastMonth.start)}%;
                   height: {hourToPercent(lastMonth.end - lastMonth.start)}%;
@@ -92,7 +92,7 @@ function hourToPercent(hour: number): number {
                       height="4"
                       patternTransform="rotate(45)"
                     >
-                      <line x1="0" y1="0" x2="0" y2="4" stroke="currentColor" stroke-width="1.5" class="text-muted-foreground/50" />
+                      <line x1="0" y1="0" x2="0" y2="4" stroke="currentColor" stroke-width="1.5" class="text-muted-foreground/40" />
                     </pattern>
                   </defs>
                   <rect width="100%" height="100%" fill="url(#diagonal-{dayIndex})" />
@@ -114,11 +114,11 @@ function hourToPercent(hour: number): number {
     <!-- Legend -->
     <div class="mt-4 flex items-center justify-center gap-6">
       <div class="flex items-center gap-2">
-        <div class="h-3 w-3 rounded-sm bg-muted-foreground/60"></div>
+        <div class="h-3 w-3 rounded-full bg-muted-foreground/60"></div>
-        <span class="text-[11px] text-muted-foreground">This month</span>
+        <span class="text-xs text-muted-foreground">This month</span>
       </div>
       <div class="flex items-center gap-2">
-        <div class="relative h-3 w-3 overflow-hidden rounded-sm">
+        <div class="relative h-3 w-3 overflow-hidden rounded-full">
           <svg class="h-full w-full" preserveAspectRatio="none">
             <defs>
               <pattern
@@ -134,7 +134,7 @@ function hourToPercent(hour: number): number {
             <rect width="100%" height="100%" fill="url(#diagonal-legend)" />
           </svg>
         </div>
-        <span class="text-[11px] text-muted-foreground">Last month</span>
+        <span class="text-xs text-muted-foreground">Last month</span>
       </div>
     </div>
   </div>