feat: improve recent domains section spacing and text truncation (#40970)

### 📝 Summary
This PR improves the visual design and user experience of the recent
domains section on the signup page with better spacing, text truncation,
and simplified domain validation to account for dev and app subdomains.

### 🎨 Changes Made

#### **SignUp Component (`app/client/src/pages/UserAuth/SignUp.tsx`)**
- **Reduced top margin**: Changed from `mt-12` to `mt-8` for better
visual balance
- **Improved spacing**: Added conditional bottom margin logic - removed
margin from the last domain item to prevent extra spacing
- **Enhanced text display**: Added `max-w-[180px] line-clamp-1` classes
to organization names and domain text to:
  - Limit maximum width to 180px
  - Truncate long text to single line with ellipsis
  - Prevent layout breaking with long domain names

#### **Domain Validation (`app/client/src/utils/multiOrgDomains.ts`)**
- **Simplified validation**: Removed redundant regex check
`(/^[a-z0-9-]+\.appsmith\.com$/i.test(domain))` from
`isValidAppsmithDomain` function to account for dev and app subdomains
- **Cleaner logic**: Validation now relies on the existing prefix checks
and `.appsmith.com` suffix validation

/ok-to-test tags="@tag.Sanity, @tag.Authentication"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/15727210490>
> Commit: 5f976b05a7f02396afb05b2740cb2564253ca74e
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=15727210490&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity, @tag.Authentication`
> Spec:
> <hr>Thu, 19 Jun 2025 00:18:50 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Style**
- Improved spacing and layout in the recent domains section for a
cleaner appearance.
- Organization name and domain text now truncate with ellipsis if too
long, ensuring single-line display.

- **Bug Fixes**
- Updated domain validation to be less restrictive, allowing a wider
range of subdomain formats.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Jacques Ikot 2025-06-19 01:25:30 +01:00 committed by GitHub
parent 93f4a85b6b
commit ad36f76920
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 9 additions and 6 deletions

View File

@ -97,7 +97,7 @@ const validate = (values: SignupFormValues) => {
}; };
const recentDomainsSection = recentDomains.length > 0 && ( const recentDomainsSection = recentDomains.length > 0 && (
<div className="mt-12"> <div className="mt-8">
<div className="mb-2"> <div className="mb-2">
<Text kind="body-m">{createMessage(YOU_VE_ALREADY_SIGNED_INTO)}</Text> <Text kind="body-m">{createMessage(YOU_VE_ALREADY_SIGNED_INTO)}</Text>
</div> </div>
@ -112,9 +112,13 @@ const recentDomainsSection = recentDomains.length > 0 && (
const avatarLetter = String.fromCharCode(65 + (index % 26)); const avatarLetter = String.fromCharCode(65 + (index % 26));
const isLastItem = index === recentDomains.length - 1;
return ( return (
<div <div
className="flex items-center justify-between p-1 mb-3" className={`flex items-center justify-between p-1 ${
isLastItem ? "mb-0" : "mb-3"
}`}
key={domain} key={domain}
> >
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
@ -122,10 +126,10 @@ const recentDomainsSection = recentDomains.length > 0 && (
{avatarLetter} {avatarLetter}
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
<span className="text-md font-semibold text-gray-700"> <span className="text-md font-semibold text-gray-700 max-w-[180px] line-clamp-1">
{orgName} {orgName}
</span> </span>
<span className="text-xs font-light text-gray-500"> <span className="text-xs font-light text-gray-500 max-w-[180px] line-clamp-1">
{domain} {domain}
</span> </span>
</div> </div>

View File

@ -16,8 +16,7 @@ function isValidAppsmithDomain(domain: string): boolean {
domain.endsWith(".appsmith.com") && domain.endsWith(".appsmith.com") &&
!domain.startsWith("login.") && !domain.startsWith("login.") &&
!domain.startsWith("release.") && !domain.startsWith("release.") &&
!domain.startsWith("dev.") && !domain.startsWith("dev.")
/^[a-z0-9-]+\.appsmith\.com$/i.test(domain)
); );
} }