🐞 Bug: Environment card status pills overlap inline action buttons on remote/edge environments

[zachweyland]

Bug Description

On the Environments dashboard, status pills (e.g. "Online", "WebSocket") visually overlap the inline action buttons ("Prune System", "Use Environment", "View Details") on remote/edge environment cards. The pill row and the action row share the same horizontal band in the card header, and at typical card widths they collide.

Steps To Reproduce

1. Add at least one remote/edge environment to Arcane (agent connection over WebSocket).
2. Open the Environments dashboard at /environments while that environment is Online.
3. Observe the card for the remote/edge environment at a typical desktop width (≈1440 px viewport).

Expected Behavior

Status pills and inline action buttons should not visually overlap. Either:

• the action row wraps onto its own line below the pills, or
• the pills wrap below the actions, or
• the action buttons collapse into the "More actions" overflow menu below a width threshold.

Actual Behavior

The WebSocket pill and the "Prune System" button render on top of each other inside the card header. Measured rects on an Online + WebSocket-connected card:

• WebSocket pill: x 1064.43 → 1140.57, y 297 → 317
• Prune System button: x 992.75 → 1129.80, y 295 → 327

≈ 65 px of horizontal overlap, with the pill fully inside the button's vertical band.

Cards for environments that don't render inline actions (Local Docker, idle remotes) still have those buttons in the DOM, positioned off‑canvas at x: -9706 → -9268 rather than removed. Not the bug, but related.

Screenshots

Arcane Version

v1.19.5

Installation Method

Docker Compose (Recommended)

Environment Type

Both Local and Remote Agents

Database Type

SQLite (Default)

Operating System

Linux

Docker Version

26.1.0, build 9714adc

Browser & Version

Firefox 151.0 (Mozilla/5.0 Macintosh; Intel Mac OS X 10.15; rv:151.0)

Relevant Logs or Error Messages

Docker Compose Configuration

name: arcane

services:
  arcane:
    container_name: arcane
    image: ghcr.io/getarcaneapp/arcane:latest
    restart: unless-stopped
    env_file:
      - .env
    environment:
      TZ: America/New_York
      APP_URL: http://192.168.x.x:3552
      PROJECTS_DIRECTORY: /volume2/docker
      PUID: "1000"
      PGID: "10"
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
      - ./data:/app/data
      - /volume2/docker:/volume2/docker
    networks:
      macvlan_net:
        ipv4_address: 192.168.x.x
      internal:
    depends_on:
      - smtp-relay

  smtp-relay:
    container_name: arcane-smtp-relay
    image: boky/postfix
    restart: unless-stopped
    environment:
      RELAYHOST: "[smtp-relay.gmail.com]:587"
      RELAYHOST_TLS: "yes"
      MYHOSTNAME: example.com
      ALLOW_EMPTY_SENDER_DOMAINS: "1"
    networks:
      internal:

networks:
  macvlan_net:
    external: true
  internal:
    driver: bridge

Environment Configuration (.env file)

ENCRYPTION_KEY=<redacted, 64-char hex>
JWT_SECRET=<redacted, 64-char hex>

Additional Context

Header markup uses a shadcn-style chip:
​
inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-[var(--radius)]
font-semibold tracking-tight border transition-all duration-300 h-5 px-2 text-[11px]
Pill parent: flex flex-wrap items-center gap-2. Pills are expected to wrap, but the inline action buttons sit in the same row, with no wrap fallback, so at card width ≈ 569 px the buttons run under/over the pills.

Suggested fix directions:

• Place the action row in its own flex row below the title/pill row.
• Or collapse "Prune System / Use Environment / View Details" into the existing "More actions" … menu below a width threshold (matches behavior already used on the Local Docker and idle remote cards).
• Replace the off-canvas hide (translate-x: -9706px) on collapsed cards with display: none or conditional render, for accessibility and to avoid the buttons being focusable while invisible.