Skip to content

Conversation

@nicodevvv
Copy link
Contributor

@nicodevvv nicodevvv commented Feb 4, 2026

Description

Fix text overflow issue for long project names in project cards and tables. Project names that exceeded their container width were breaking the layout instead of being truncated properly.

Goal

Ensure long project names display correctly with ellipsis when they overflow their container, maintaining a clean and consistent UI.

Key Changes

  • Added prettier to normalize styles
  • Updated styles to handle edge cases with very long project names

Type of Change

  • 🐛 Bug fix (non-breaking change which fixes an issue)
  • ✨ New feature (non-breaking change which adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • 📝 Documentation update
  • 🎨 Style/UI changes
  • ♻️ Refactoring (no functional changes)
  • ⚡ Performance improvement
  • ✅ Test updates
  • 🔧 Build/configuration changes

Impact Assessment

Database Impact

  • No database changes
  • New migration(s) included
  • Existing data migration required

Backup Impact

  • No impact on backups
  • Backup format changed
  • Restore compatibility maintained

Testing

How Has This Been Tested?

  • Unit tests
  • Integration tests
  • Manual testing
  • Tested with SonarQube analysis

Test Steps

  1. Create a project with a very long name (e.g., "This is a very long project name that should be truncated with ellipsis when displayed")
  2. Navigate to the projects page and verify the name is truncated with ellipsis in the table
  3. Navigate to the home page and verify the project name is truncated properly in project cards
  4. Create a new task and verify the project name selector shows correctly the name

Test Configuration

  • Node version: 24.11.1
  • npm version: 11.6.2
  • Platform tested: macOS

UI Changes

Before

Project names that exceeded the container width would overflow and break the layout or wrap to multiple lines, causing inconsistent card heights and misaligned content.

After

Long project names are now truncated with an ellipsis (...) when they exceed the available space, maintaining consistent layout and clean appearance.

Checklist

  • My code follows the project's coding standards
  • I have performed a self-review of my code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings or errors
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • I have run npm run lint and fixed any issues
  • I have run npm test and all tests pass
  • I have run npm run test:electron and all tests pass
  • I have run npm run sonar:check and the analysis passes
  • Any dependent changes have been merged and published

Breaking Changes

  • This PR contains breaking changes

Related Issues

Closes ##27
Related to #27

Additional Context

This fix improves the visual consistency of the application by ensuring all project names display properly regardless of their length.

Reviewer Notes

Please verify that:

  • Project names truncate properly on different screen sizes
  • The ellipsis appears when project names are too long
  • No layout issues occur with varying project name lengths

@altaskur altaskur merged commit f2a582c into altaskur:develop Feb 4, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants