Repository: supabase/supabase
File: apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx (TypeScript)

Code before:
            className="underline"
            href="/docs/guides/platform/billing-on-supabase"
            target="_blank"
          >
            bills per organization
          </Link>
          . If you want to upgrade your existing projects, upgrade your existing organization
          instead.
        </p>

        <ul className="mt-4 space-y-6">
          {freeOrgs
            .filter((it) => projectsByOrg[it.slug]?.length > 0)
            .map((org) => {
              const orgProjects = projectsByOrg[org.slug].map((it) => it.name)

              return (
                <li key={`org_${org.slug}`}>
                  <div className="flex justify-between text-sm">
                    <span>{org.name}</span>
                    <Button asChild type="primary" size="tiny">
                      <Link href={`/org/${org.slug}/billing?panel=subscriptionPlan`}>
                        Change Plan
                      </Link>
                    </Button>
                  </div>
                  <div className="text-foreground-light text-xs">
                    {orgProjects.length <= 2 ? (
                      <span>{orgProjects.join('and ')}</span>
                    ) : (
                      <div>
                        {orgProjects.slice(0, 2).join(', ')} and{' '}
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <span className="underline decoration-dotted">
                              {orgProjects.length - 2} other{' '}
                              {orgProjects.length === 3 ? 'project' : 'project'}
                            </span>
                          </TooltipTrigger>
                          <TooltipContent>
                            <ul className="list-disc list-inside">
                              {orgProjects.slice(2).map((project) => (
                                <li>{project}</li>
                              ))}
                            </ul>
                          </TooltipContent>
                        </Tooltip>
                      </div>
                    )}
                  </div>
                </li>

Review comment (suggestion):
missing space:
<img width="208" height="82" alt="image" src="https://github.com/user-attachments/assets/2e4ddbc4-82fe-4793-a03d-de6bfd01e6b6" />


Code after:
          <InlineLink href="https://supabase.com/docs/guides/platform/billing-on-supabase">
            bills per organization
          </InlineLink>
          . If you want to upgrade your existing projects, upgrade your existing organization
          instead.
        </p>

        <ul className="mt-4 space-y-6">
          {freeOrgs
            .filter((it) => projectsByOrg[it.slug]?.length > 0)
            .map((org) => {
              const orgProjects = projectsByOrg[org.slug].map((it) => it.name)

              return (
                <li key={`org_${org.slug}`}>
                  <div className="flex justify-between text-sm">
                    <span>{org.name}</span>
                    <Button asChild type="primary" size="tiny">
                      <Link href={`/org/${org.slug}/billing?panel=subscriptionPlan`}>
                        Change Plan
                      </Link>
                    </Button>
                  </div>
                  <div className="text-foreground-light text-xs">
                    {orgProjects.length <= 2 ? (
                      <span>{orgProjects.join(' and ')}</span>
                    ) : (
                      <div>
                        {orgProjects.slice(0, 2).join(', ')} and{' '}
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <span className="underline decoration-dotted">
                              {orgProjects.length - 2} other{' '}
                              {orgProjects.length === 3 ? 'project' : 'project'}
                            </span>
                          </TooltipTrigger>
                          <TooltipContent>
                            <ul className="list-disc list-inside">
                              {orgProjects.slice(2).map((project) => (
                                <li>{project}</li>
                              ))}
                            </ul>
                          </TooltipContent>
                        </Tooltip>
                      </div>
                    )}
                  </div>
                </li>
              )
            })}
        </ul>