Fix mobile responsiveness across UI components

[Copilot]

Several flex layouts had no wrapping, causing content to overflow or clip on narrow (mobile) viewports.

Changes

• App.vue — accordion summary (endpoint name / IP / badges): flex gap-4 → flex flex-wrap gap-2 sm:gap-4
• EndpointCard.vue — SSL properties row (TLS version, handshake, cipher): flex gap-4 → flex flex-wrap gap-4
• EndpointCertificateCard.vue
  • Countdown + validity dates: flex gap-10 items-center → flex flex-col sm:flex-row gap-4 items-start sm:items-center
  • Algorithm labels: flex gap-5 → flex flex-wrap gap-4
• WhoIs.vue
  • Name servers list: flex gap-2 → flex flex-wrap gap-2
  • Countdown + expiration date: flex gap-10 items-center → flex flex-col sm:flex-row gap-4 items-start sm:items-center

All row-to-column switches use sm: (640px) as the breakpoint, stacking vertically on mobile and reverting to the original horizontal layout on wider screens.

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:

• example.com
  • Triggering command: /usr/bin/curl curl -s REDACTED (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)

Original prompt

Fix mobile responsivity

---

⚡ Quickly spin up Copilot coding agent tasks from anywhere on your macOS or Windows machine with Raycast.