fix(ui): ensure CLI row is always visible on event cards and expands full command into textarea

This commit is contained in:
Tyler Gillispie 2026-08-26 19:40:30 -07:00
parent 8777ae33c8
commit 86896fa8c3

View File

@ -52,7 +52,7 @@ export const EventCockpitDeck = ({ eventPasses }: { eventPasses: any[] }) => {
{/* Quick Copy Snippets */} {/* Quick Copy Snippets */}
<div style="display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem;"> <div style="display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem;">
<div style="display: flex; align-items: center; gap: 0.5rem;"> <div style="display: flex; align-items: center; gap: 0.5rem;">
<span style="font-size: 0.8rem; font-weight: 600; width: 60px; color: var(--text-muted);"> <span style="font-size: 0.8rem; font-weight: 600; width: 45px; color: var(--text-muted);">
PIN: PIN:
</span> </span>
<code <code
@ -79,7 +79,7 @@ export const EventCockpitDeck = ({ eventPasses }: { eventPasses: any[] }) => {
</button> </button>
</div> </div>
<div style="display: flex; align-items: center; gap: 0.5rem;"> <div style="display: flex; align-items: center; gap: 0.5rem;">
<span style="font-size: 0.8rem; font-weight: 600; width: 60px; color: var(--text-muted);"> <span style="font-size: 0.8rem; font-weight: 600; width: 45px; color: var(--text-muted);">
Link: Link:
</span> </span>
<code style="flex: 1; padding: 0.35rem 0.5rem; background: var(--surface-muted); border-radius: var(--radius-sm); font-family: monospace; font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> <code style="flex: 1; padding: 0.35rem 0.5rem; background: var(--surface-muted); border-radius: var(--radius-sm); font-family: monospace; font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
@ -95,11 +95,10 @@ export const EventCockpitDeck = ({ eventPasses }: { eventPasses: any[] }) => {
</button> </button>
</div> </div>
<details style="font-size: 0.8rem;"> <div style="display: flex; align-items: center; gap: 0.5rem;">
<summary style="cursor: pointer; color: var(--primary); font-weight: 600;"> <span style="font-size: 0.8rem; font-weight: 600; width: 45px; color: var(--text-muted);">
Show CLI 1-liner handoff CLI:
</summary> </span>
<div style="margin-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem;">
<code style="flex: 1; padding: 0.35rem 0.5rem; background: var(--surface-muted); border-radius: var(--radius-sm); font-family: monospace; font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> <code style="flex: 1; padding: 0.35rem 0.5rem; background: var(--surface-muted); border-radius: var(--radius-sm); font-family: monospace; font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
curl -sSL {Deno.env.get("RP_ID") curl -sSL {Deno.env.get("RP_ID")
? `https://${Deno.env.get("RP_ID")}` ? `https://${Deno.env.get("RP_ID")}`
@ -114,6 +113,23 @@ export const EventCockpitDeck = ({ eventPasses }: { eventPasses: any[] }) => {
Copy Copy
</button> </button>
</div> </div>
<details style="font-size: 0.75rem; margin-top: 0.1rem;">
<summary style="cursor: pointer; color: var(--primary); font-weight: 600; user-select: none;">
Expand full CLI command
</summary>
<textarea
readonly
rows={2}
style="width: 100%; margin-top: 0.4rem; padding: 0.4rem 0.5rem; font-family: monospace; font-size: 0.75rem; background: var(--surface-muted); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); resize: vertical; box-sizing: border-box;"
onclick="this.select()"
>
{`curl -sSL ${
Deno.env.get("RP_ID")
? `https://${Deno.env.get("RP_ID")}`
: ""
}/join/${event.slug}?format=env | source /dev/stdin`}
</textarea>
</details> </details>
</div> </div>