Sidebar Navigation Title Length Control Fix

Sidebar Navigation Title Length Control Fix

Version Implemented: 0.229.001

Issue Description

The application title in the sidebar navigation could extend beyond the sidebar width, causing layout issues and poor user experience. Long titles would overflow the allocated space, potentially overlapping with other UI elements or being cut off awkwardly.

Root Cause Analysis

The sidebar navigation template (_sidebar_nav.html) did not include any logic to control the display of long application titles. Titles of any length would be displayed, regardless of whether they fit within the sidebar's fixed width constraints.

Technical Details

Files Modified

• application/single_app/templates/_sidebar_nav.html
• application/single_app/config.py (version update)

Code Changes Summary

1. Enhanced Title Elements: Added data attributes to track title content and logo state

   <span id="sidebar-app-title" class="fw-bold" 
         data-title="{{ app_settings.app_title }}" 
         data-show-logo="{{ app_settings.show_logo }}">
     {{ app_settings.app_title }}
   </span>
   

2. JavaScript Logic: Implemented character length validation

   function controlTitleVisibility() {
     var titleElement = document.getElementById('sidebar-app-title');
     if (titleElement) {
       var title = titleElement.getAttribute('data-title') || titleElement.textContent;
       var showLogo = titleElement.getAttribute('data-show-logo') === 'true';
       var maxLength = showLogo ? 10 : 18;
       
       if (title.length > maxLength) {
         titleElement.style.display = 'none';
       } else {
         titleElement.style.display = '';
       }
     }
   }
   

3. Character Limits: Implemented different limits based on logo presence

   • With logo enabled: 10 characters (including spaces)
   • With logo disabled: 18 characters (including spaces)

Testing Approach

• Created comprehensive functional test (test_sidebar_title_length_control.py)
• Tests various title lengths with and without logo
• Validates character counting accuracy including spaces
• Uses Selenium WebDriver for browser-based testing

Validation

Test Results

• ✅ Short titles (≤10 chars with logo) remain visible
• ✅ Long titles (>10 chars with logo) are hidden
• ✅ Medium titles (≤18 chars without logo) remain visible
• ✅ Very long titles (>18 chars without logo) are hidden
• ✅ Character counting includes spaces correctly
• ✅ Both logo and non-logo scenarios work as expected

Before/After Comparison

Before:

• All titles displayed regardless of length
• Long titles could overflow sidebar width
• Poor visual presentation for lengthy application names

After:

• Dynamic title visibility based on character count
• Prevents sidebar layout issues
• Maintains clean, professional appearance
• Responsive to logo presence/absence

User Experience Improvements

1. Consistent Layout: Sidebar maintains fixed width without overflow
2. Professional Appearance: Prevents awkward text cutoffs
3. Adaptive Behavior: Different limits based on available space (logo vs no logo)
4. Automatic Control: No manual intervention required from users

Implementation Notes

• The solution preserves the original _top_nav.html file unchanged as requested
• Uses progressive enhancement - JavaScript controls visibility without breaking basic functionality
• Character counting includes all characters including spaces for accurate length measurement
• Solution is backwards compatible and gracefully handles missing data attributes

Future Considerations

• Could be extended to show truncated titles with ellipsis instead of hiding completely
• Might benefit from responsive breakpoints for different screen sizes
• Could include hover tooltips to show full title when hidden