MeshMonitor v2.8.4

This patch release fixes text overflow issues on mobile devices where long node names would get cut off.

🐛 Bug Fixes

Text Truncation for Long Node Names (#251, #253)

Fixed display cutoff issues on iOS Safari and other mobile browsers where long node names would overflow and get partially cut off.

Problem:

• Long node names in the node list were getting cut off on the right side
• Dashboard node cards with long names would overflow
• Particularly noticeable on iPhone 13 Pro and smaller screens
• Text would be partially visible but clipped, making it hard to read

Solution:
Added CSS text truncation with ellipsis (...) to handle long node names gracefully:

• Node List Items - Long names now truncate with ellipsis in Maps/Messages tabs
• Dashboard Node Cards - Node cards properly truncate long names
• Header Device Name - Device name in header limited to 200px max-width

User Benefits:

• ✅ Long node names show ellipsis (...) instead of being cut off
• ✅ All content properly contained within boundaries
• ✅ Hover tooltips show full name (browser default behavior)
• ✅ Consistent truncation across mobile and desktop
• ✅ Works on all screen sizes, especially beneficial for smaller devices

Technical Implementation:

/* Node list items */
.node-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0; /* Important for flexbox truncation */
}

/* Dashboard cards */
.node-card h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Header device name */
.device-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

🐳 Docker Deployment

Pull the latest image:

docker pull ghcr.io/yeraze/meshmonitor:v2.8.4
docker pull ghcr.io/yeraze/meshmonitor:latest

Or use docker-compose:

services:
  meshmonitor:
    image: ghcr.io/yeraze/meshmonitor:v2.8.4
    # ... rest of config

📊 Technical Details

Changes

• CSS text truncation applied to three key areas
• No JavaScript changes required
• Works with existing responsive design
• No performance impact

Files Modified

• src/App.css - Added text truncation rules

Testing

• ✅ Verified on iOS Safari (iPhone 13 Pro)
• ✅ Tested with very long node names
• ✅ Confirmed ellipsis appears correctly
• ✅ Desktop experience unchanged

🙏 Contributors

• @Yeraze - Primary development
• @tonicb78 - Issue reporting and testing
• Claude Code - AI-assisted development

📝 Related Issues

• Fixes #251 - Display cutoff in node list and dashboard on iOS Safari

Full Changelog: v2.8.3...v2.8.4

🚀 MeshMonitor v2.8.4

📦 Installation

Docker (recommended):

docker run -d \
  --name meshmonitor \
  -p 8080:3001 \
  -v meshmonitor-data:/data \
  ghcr.io/Yeraze/meshmonitor:v2.8.4

🧪 Testing

✅ All tests passed
✅ TypeScript checks passed
✅ Docker images built for linux/amd64, linux/arm64, linux/arm/v7

📋 Changes

See commit history for detailed changes.