feat: truncate text in navbar

[nimish-ks]

🔍 Overview

Long application names, environment names, and other elements in the navigation bar currently overflow their containers, leading to layout issues. This affects the UI's cleanliness and usability, particularly with longer text strings.

💡 Proposed Changes

• Added CSS-based text truncation for navigation elements that can overflow
• Implemented flexible width handling while maintaining the navbar's existing structure
• Added shrink-0 to fixed elements (logo, separators) to preserve their dimensions
• Applied text-ellipsis to truncatable elements while allowing them to expand when space permits

🖼️ Screenshots or Demo

Before:

After:

📝 Release Notes

• Fixed UI issue where long application names and environment names would overflow in the navigation bar
• Improved responsive behavior of navigation text elements

🧪 Testing

Test cases to verify:

• Very long application names (>30 characters)
• Multiple environment names in the path
• Different viewport widths
• Various browser zoom levels

🎯 Reviewer Focus

• Check NavBar.tsx for the CSS class changes
• Verify truncation behavior at different screen sizes
• Ensure the navbar maintains its layout structure

💚 Did You...

• Verify the app builds locally
• Manually test the changes on different browsers/devices
• Test with various text lengths and viewport sizes

This is a purely CSS-based fix with no functional changes to the application's behavior.