Zite Collaborate Dialog

The collaborate dialog from inside Zite, formerly Fillout the form builder, now an AI no-code platform for shipping business apps. Lifted as-is, then refined prompt by prompt until it feels right.

01

The invite email field looks like an input, but tapping it sends the user to a second screen. That's a false affordance, and it adds a step the flow doesn't need. We can consolidate this into a single Base UI combobox, with a group avatar in the trigger to indicate existing members.

  1. The 'Invite by email' input and the 'People with access' row both look like content, but tapping either routes to a second screen.
  2. Tapping either swaps the dialog wholesale. The people list disappears and the user is handed an emails field, a role select, and a Send button.
  3. One combobox. Existing members appear as chips in the trigger. Opening the popup queues new invites as chips inside its input. Hitting 'Send invites' moves them into the list below with a Pending badge until they accept.
02

The footer has the same kind of issue. Three controls share a row without signaling they're one feature: a role dropdown, a trash icon that actually means 'disable link', and a Copy button on the far right. We can fold the role into the section title ('Shareable [Admin] invite link'), stack the URL below it with copy and delete embedded inside the field, and show a Create link button when no link exists.

  1. Three controls, one row, no relationship: a role dropdown, a trash icon that means 'disable' (not 'delete'), and a Copy button on the far side.
  2. One section. The role lives inside the title as a clickable pill ('Shareable [Admin] invite link'), the URL surfaces below with copy and delete embedded inside the field, and a Create link button stands in when no link exists. Switching the role flips the URL between admin and member.
03

'Adding users is free' is marketing copy, not UI. Pricing belongs on the marketing site, not next to functional controls. We can strip it from the dialog header.

  1. A pricing badge sits in the header doing no functional work. It restates something the product page should already be saying, and adds noise next to the title.
  2. Header back to just the title. Same dialog, less noise.
04

The close X sits further out than the rest of the dialog content. The combobox above and the URL input below both end at the same vertical, but the X extends past it. We can pull the X in so its right edge aligns with that line.

  1. The X is the only thing past the body's right padding. The combobox above and the URL input below both end at the same vertical, but the X extends past it.
  2. The X tucks in to share a right edge with the combobox and the URL input. Same vertical, top to bottom.
05

650px is wider than the content needs. The combobox and the URL input each take a single row, and at this width they look stretched. We can narrow the dialog to about 500px so it reads as a focused popup rather than a wide card.

  1. At 650px the dialog feels stretched. Single-row content (a combobox, a URL input) doesn't earn that much horizontal space.
  2. 500px instead. Same content, tighter proportions. It reads as a focused popup, not a wide card.
06

The combobox trigger is taller than it needs to be. With chips at about 22px, a 44px min-height shell leaves a generous halo above and below them. We can tighten the padding so the chips lead the eye, not the whitespace around them.

  1. 44px tall trigger with py-1.5. The chips float in the middle with too much vertical breathing room. The shell looks chunky next to the rest of the dialog.
  2. 36px min-height, py-1. Tighter inside the trigger and the popup chip area. The chips now hug the shell and the content reads first.
07

'Collaborate in Zite' is a label, not an explanation. Without a subtitle the user has to scan the controls to figure out what's possible. We can add a one-line description under the title that names both invite paths: direct emails and the shareable link.

  1. Just the title. The two invite paths (direct email and shareable link) aren't named anywhere until the user reads the controls below.
  2. One line under the title names both paths: 'Add teammates by email or share an invite link.' The user knows what's on offer before touching a single control.
08

Tighten the vertical padding on the Shareable [Admin] role pill and the Create link button so the link section reads at the same rhythm as the combobox and URL input. Stretch the Shareable trigger's hover target to fill the row height (self-stretch + h-full, derived from the container) so it lines up flush with the Create link button.

  1. The role pill and Create link button carry more vertical padding than they earn, sitting taller than the controls above and below. The Shareable trigger's hover target is also shorter than the Create link button, so they don't line up.
  2. Vertical padding trimmed. The role pill's inner chip drops to h-5 with a tighter rounded-sm corner; the Create link button drops to h-7. The Shareable trigger's wrapper self-stretches to the row and the trigger fills it with h-full, deriving height from the container instead of a hardcoded value. Hover targets now line up flush.
09

Keyboard users can reach the combobox list, but every row stops at the user. The role pill and the remove action are mouse-only. We can give each row three keyboard stops (user, role, remove) so arrow keys walk through them, Enter opens the role select, and Enter on remove deletes the member.

  1. Each row is a single combobox stop. The role pill and removal aren't reachable with arrow keys, only the user row is. Removal isn't even surfaced in the popup. The user has to close it and find the chip.
  2. Each user expands into three keyboard stops: user, role, remove. Arrow keys walk through them, the role select opens with Enter (then arrow keys to pick), and remove is a one-key delete. A small focus halo on the role and remove pills only appears during keyboard navigation, so mouse users still see clean rows.