feat: floating action button with scroll-to-top and expandable sub-actions

[Copilot]

• Create FloatingActionButton.tsx React component with:
  • Main button (scroll-to-top) visible after scroll threshold (300 px default)
  • Up to 6 configurable sub-action buttons at clock positions 1, 3, 5, 7, 9, 11
  • Sub-buttons appear on hover, spread at correct clock-face angles
  • Mouse leave delay (100 ms) so cursor can travel to sub-buttons without collapse
  • Timer cleanup on unmount to prevent state updates on unmounted component
  • aria-hidden when FAB is not visible (screen reader accessibility)
  • Keyboard accessibility (focus-visible rings)
  • Dark mode support via Tailwind brand colors
• Add FloatingActionButton to BaseLayout.astro with client:idle and Home + About sub-actions
• Reduce orbit radius from 72 px → 58 px so sub-buttons sit closer to the main button
• Build verified, CodeQL clean (0 alerts)
• Before/after screenshots captured and embedded below

---

Screenshots

Before

No FAB present — bottom-right corner is empty when scrolled.

After — FAB visible (scrolled down)

Teal circular button with an up-arrow appears at the bottom-right once the page is scrolled past 300 px.

After — FAB expanded on hover (light mode)

Sub-buttons now orbit at 58 px — sitting close to the main button.

After — FAB expanded on hover (dark mode)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Floating action button - return to top</issue_title>
<issue_description>Would like a floating action button in the bottom right, that is visible when the page is scrolled down, it will contain an up arrow icon and will send the user to the top of the page.

I'd like to actually have the ability to extend so that we can add smaller buttons to it. For example you can click it, but if you just hover over it, buttons will appear around its circumference. These will be smaller (maybe 2/3 the size) and will provide other links that might be usefull, for example, there could be to buttons for home and about, starting. They should be spread consistently around, assuming a max of 6 possible buttons.

Which means hte larger FAB could have 6 buttons at 1, 3, 5, 7, 9 and 11 if you were looking at a clock. </issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Floating action button - return to top #97

---

📍 Connect Copilot coding agent with Jira, Azure Boards or Linear to delegate work to Copilot in one click without leaving your project management tool.

[kenjdavidson]

@copilot are you forgetting something? From your instructions? Something you're supposed to provide on UI changes?

[Copilot]

@copilot are you forgetting something? From your instructions? Something you're supposed to provide on UI changes?

Sorry about that! The PR description has been updated with the required before/after screenshots:

• Before — scrolled page with no FAB present in the bottom-right corner
• After (light mode) — FAB visible when scrolled, and sub-buttons (Home at 11 o'clock, About at 9 o'clock) fanned out on hover
• After (dark mode) — same behaviour using the existing brand-* colour tokens

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• telemetry.astro.build
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node node_modules/.bin/astro build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[kenjdavidson]

@copilot based on the screenshots, I'd like the auxiliary buttons to be a little closer to the main button.

[Copilot]

@copilot based on the screenshots, I'd like the auxiliary buttons to be a little closer to the main button.

Done in cc58369 — reduced ORBIT_RADIUS from 72 px to 58 px so the sub-buttons sit much closer to the main button.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• telemetry.astro.build
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/kenjdavidson.github.io/kenjdavidson.github.io/node_modules/.bin/astro build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)