Invite people after review, then finish the Rule, with login before inviting and Invite your members on Profile.

app/(app)/create/screens/select/PublishedStakeholdersManagePanel.tsx

@@ -129,28 +129,28 @@ export function PublishedStakeholdersManagePanel({
           {t("managePublished.empty")}
         </p>
       ) : (
-        <ul className="flex flex-col gap-3">
+        <ul className="flex w-full flex-col border-t border-[var(--color-border-default-secondary)]">
           {items.map((row) => (
             <li
               key={row.id}
-              className="flex flex-col gap-2 rounded-lg bg-black/5 px-3 py-3 md:flex-row md:items-center md:justify-between"
+              className="flex items-center gap-[var(--space-300)] border-b border-[var(--color-border-default-secondary)] py-[var(--space-200)]"
             >
-              <div className="flex min-w-0 flex-col gap-1">
-                <span className="truncate text-sm font-medium text-[var(--color-content-default-primary)] md:text-base">
+              <div className="flex min-w-0 flex-1 flex-col gap-1">
+                <span className="truncate text-medium-paragraph text-[var(--color-content-default-primary)]">
                   {row.email}
                 </span>
-                <span className="text-x-small-paragraph text-[var(--color-content-default-tertiary)] md:text-sm">
+                <span className="text-x-small-paragraph text-[var(--color-content-default-tertiary)]">
                   {row.status === "pending"
                     ? t("managePublished.pending")
                     : t("managePublished.accepted")}
                 </span>
               </div>
-              <div className="flex flex-wrap gap-2">
+              <div className="flex shrink-0 flex-wrap justify-end gap-2">
                 {row.status === "pending" ? (
                   <Button
                     type="button"
                     size="small"
-                    buttonType="outline"
+                    buttonType="ghost"
                     palette="default"
                     disabled={busyId === row.id}
                     onClick={() => void handleResend(row.id)}
@@ -165,7 +165,7 @@ export function PublishedStakeholdersManagePanel({
                 <Button
                   type="button"
                   size="small"
-                  buttonType="outline"
+                  buttonType="ghost"
                   palette="default"
                   disabled={busyId === row.id}
                   onClick={() => void handleRemove(row.id)}
@@ -182,7 +182,7 @@ export function PublishedStakeholdersManagePanel({
         </ul>
       )}
 
-      <div className="flex flex-col gap-3 md:flex-row md:items-end md:gap-3">
+      <div className="flex items-start gap-[var(--space-200)]">
         <div className="min-w-0 flex-1">
           <TextInput
             id="published-stakeholder-email"
@@ -201,17 +201,18 @@ export function PublishedStakeholdersManagePanel({
             autoComplete="email"
           />
         </div>
-        <Button
-          type="button"
-          size="small"
-          buttonType="filled"
-          palette="default"
-          className="md:mb-[2px]"
-          disabled={addBusy || items === null}
-          onClick={() => void handleAdd()}
-        >
-          {t("managePublished.addInvite")}
-        </Button>
+        <div className="shrink-0 pt-[29px]">
+          <Button
+            type="button"
+            size="small"
+            buttonType="outline"
+            palette="default"
+            disabled={addBusy || items === null}
+            onClick={() => void handleAdd()}
+          >
+            {t("managePublished.addInvite")}
+          </Button>
+        </div>
       </div>
     </section>
   );