.creator-user-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; min-width: 0; } .creator-user-link { display: flex; align-items: center; gap: 0.75rem; color: inherit; text-decoration: none; min-width: 0; flex: 1; min-height: 44px; } .creator-avatar { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--platform-panel-fill, #eee); border: 1px solid var(--platform-surface-border, #ccc); } .creator-avatar img { width: 100%; height: 100%; object-fit: cover; } .creator-user-copy { display: grid; min-width: 0; gap: 0.25rem; overflow-wrap: anywhere; } .creator-user-copy small { color: var(--platform-text-soft); } .creator-user-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .creator-follow { min-height: 44px; padding: 0.5rem 1rem; border: 1px solid var(--platform-surface-border, #ccc); border-radius: 999px; background: var(--platform-panel-fill, #fff); color: inherit; cursor: pointer; white-space: nowrap; } .creator-follow:disabled { opacity: 0.55; cursor: default; } .creator-follow:focus-visible, .creator-user-link:focus-visible { outline: 2px solid #b85d3d; outline-offset: 3px; } .creator-follow--active { color: var(--platform-text-soft); } @media (max-width: 480px) { .creator-user-row > .creator-user-link { flex-basis: 100%; } .creator-user-row > .creator-user-actions { margin-left: 60px; } }