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,25 +95,41 @@ 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:
</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;">
curl -sSL {Deno.env.get("RP_ID")
? `https://${Deno.env.get("RP_ID")}`
: ""}/join/{event.slug}?format=env | source /dev/stdin
</code>
<button
type="button"
class="btn-outline"
style="padding: 0.25rem 0.5rem; font-size: 0.75rem; min-height: 28px;"
onclick={`copyText("curl -sSL " + window.location.origin + "/join/${event.slug}?format=env | source /dev/stdin")`}
>
Copy
</button>
</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> </summary>
<div style="margin-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem;"> <textarea
<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;"> readonly
curl -sSL {Deno.env.get("RP_ID") 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")}` ? `https://${Deno.env.get("RP_ID")}`
: ""}/join/{event.slug}?format=env | source /dev/stdin : ""
</code> }/join/${event.slug}?format=env | source /dev/stdin`}
<button </textarea>
type="button"
class="btn-outline"
style="padding: 0.25rem 0.5rem; font-size: 0.75rem; min-height: 28px;"
onclick={`copyText("curl -sSL " + window.location.origin + "/join/${event.slug}?format=env | source /dev/stdin")`}
>
Copy
</button>
</div>
</details> </details>
</div> </div>