fix: truncate long labels

[HarshMN2345]

What does this PR do?

before

### after

Test Plan

(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work.)

Related PRs and Issues

(If this PR is related to any other PR or resolves any issue or related to any issue link all related PR and issues here.)

Have you read the Contributing Guidelines on issues?

(Write your answer here.)

Summary by CodeRabbit

• Style
  • Enhanced name display formatting in the permissions section with responsive width handling based on screen size for improved visual presentation across default displays and tooltips.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[appwrite]

Console (appwrite/console)

Project ID: 688b7bf400350cbd60e9

Sites (1)

Site	Status	Logs	Preview	QR
console-stage 688b7cf6003b1842c9dc	Ready	View Logs	Preview URL

Tip

Git integration provides automatic deployments with optional PR comments

[coderabbitai]

Walkthrough

This pull request modifies a single Svelte component to wrap name values with a formatName function for improved display formatting. The changes apply to customName, roleName, and role fields across multiple UI rendering paths, including default displays, tooltips, and popover content. The formatting uses responsive width values based on viewport size (20/28 for small screens, 28 otherwise). These are display-only modifications with no changes to data fetching, state management, or exported interfaces.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Single file modified with repetitive formatting pattern applied consistently across multiple name fields
• No logic changes, state modifications, or API/data fetching impacts
• Straightforward cosmetic/display updates that follow a uniform approach
• Responsive width handling is the primary complexity consideration

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: truncate long labels' directly aligns with the main change: applying formatName wrapping to display names with dynamic width-based truncation, which truncates long labels in the permissions row component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-SER-SER-414-truncate-long-labels

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/lib/components/permissions/row.svelte (1)

319-319: Apply formatName to phone numbers for consistency.

The email field (lines 309-312) is truncated using formatName, but the phone number here is not. For consistency and to handle long international phone numbers, consider applying the same truncation logic.

Apply this diff to add truncation:

-                                                Phone: {data.phone}
+                                                Phone: {formatName(
+                                                    data.phone,
+                                                    $isSmallViewport ? 24 : 32
+                                                )}

🧹 Nitpick comments (1)

src/lib/components/permissions/row.svelte (1)

179-182: Consider using consistent truncation widths for the same data type.

The same data (name/email/phone) is truncated with different widths in different locations:

• Lines 179-182: Uses 16/20 for the main button display
• Lines 284-290: Uses 18/24 for the tooltip link display

For better UX consistency, consider using the same truncation width when displaying the same data type across different UI contexts, or document why different widths are appropriate for each context.

Also applies to: 284-290

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 71db5d6 and 38cf37d.

📒 Files selected for processing (1)

• src/lib/components/permissions/row.svelte (1 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{ts,tsx,js,jsx,svelte}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx,js,jsx,svelte}: Import reusable modules from the src/lib directory using the $lib alias
Use minimal comments in code; reserve comments for TODOs or complex logic explanations
Use $lib, $routes, and $themes aliases instead of relative paths for module imports

Files:

• src/lib/components/permissions/row.svelte

src/lib/components/**/*.svelte

📄 CodeRabbit inference engine (AGENTS.md)

Use PascalCase for component file names and place them in src/lib/components/[feature]/ directory structure

Files:

• src/lib/components/permissions/row.svelte

**/*.{ts,tsx,js,jsx,svelte,json}

📄 CodeRabbit inference engine (AGENTS.md)

Use 4 spaces for indentation, single quotes, 100 character line width, and no trailing commas per Prettier configuration

Files:

• src/lib/components/permissions/row.svelte

**/*.svelte

📄 CodeRabbit inference engine (AGENTS.md)

Use Svelte 5 + SvelteKit 2 syntax with TypeScript for component development

Files:

• src/lib/components/permissions/row.svelte

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: build
• GitHub Check: e2e

🔇 Additional comments (1)

src/lib/components/permissions/row.svelte (1)

171-171: Verify that the truncation width is sufficient for custom permissions.

The custom permission role is truncated to only 8/15 characters, which is significantly shorter than other name truncations in this component (16+ characters elsewhere). Ensure this is adequate for displaying meaningful custom permission names, as very short truncation might make them difficult to identify.