Skip to content

Conversation

@SuperKali
Copy link
Member

Summary

This PR fixes the board image display issue in the flash progress screen where images were overflowing and invading the text area, making the UI appear cramped and unprofessional.

Fixes #84

Changes

UI/UX Fixes

  • Reduce board image scale: Changed transform: scale(2.0) to scale(1.5) (effective size from 200px to 150px)
  • Increase spacing: Updated .flash-header gap from 18px → 20px
  • Better padding: Increased horizontal padding from 18px → 24px
  • Responsive updates: Proportionally adjusted breakpoints for mobile devices

Before: Images were 200px effective size, causing overflow and cramped text layout
After: Images are 150px effective size, properly contained with balanced spacing

CI/CD Improvements

  • Removed duplicate npm cache from setup-node action (already using explicit cache action)
  • Simplified cache keys by removing architecture-specific components
  • Added versioned shared keys (v1-*) for Rust workspace cache
  • Improved cache hit rate across different runner architectures

Screenshots

image

Notes

  • Changes are backward compatible
  • No breaking changes to existing functionality
  • CSS-only modifications for UI fixes (no React/TypeScript changes)

Fixes #84

Board images in the flash progress screen were displaying too large (200px
effective size) causing overflow and invading the text area. This made the
UI appear cramped and unprofessional.

CSS Changes:
- Reduce transform scale from 2.0 to 1.5 (150px effective size)
- Increase flash-header gap from 18px to 20px for better spacing
- Increase flash-header padding from 18px to 20px 24px (horizontal)
- Update responsive breakpoints proportionally for mobile

CI/CD Changes:
- Remove duplicate npm cache from setup-node (using explicit cache action)
- Simplify cache keys by removing architecture-specific components
- Add versioned shared keys for Rust workspace cache
- Improve cache hit rate across different runners
@SuperKali SuperKali added enhancement New feature or request component: flash-progress Flash progress UI ci-cd CI/CD and build pipeline labels Jan 20, 2026
@github-actions
Copy link

🧪 Test Builds

Version: 0.0.0-pr.86 | PR: #86 | Status: ready for testing

Platform Download
Linux x64 📦 .deb / .AppImage
Windows x64 📦 .exe
macOS ARM64 📦 .dmg
ℹ️ About these builds
  • 🔓 Public downloads via nightly.link (no GitHub login required)
  • ⚠️ Unsigned builds for testing purposes only
  • Expires in 7 days
  • 🔄 Updated on every push to this PR

@github-actions github-actions bot added the status: ready for review Ready to be reviewed label Jan 20, 2026
Copy link
Member

@igorpecovnik igorpecovnik left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we are scaling image down, perhaps switching to lower resolution on the way? Perhaps its nitpicking? :)

@SuperKali
Copy link
Member Author

Let’s say it wouldn’t change anythin, it's hardcoded on the css, that by default makes a transform scale, so even if it’s of quality the css commands both in height and width and the scaling of that image

@igorpecovnik
Copy link
Member

igorpecovnik commented Jan 20, 2026

ok, merge.

@SuperKali SuperKali merged commit 3904ed5 into main Jan 21, 2026
8 checks passed
@SuperKali SuperKali deleted the fix/board-image-display-issue-84 branch January 21, 2026 06:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ci-cd CI/CD and build pipeline component: flash-progress Flash progress UI enhancement New feature or request status: ready for review Ready to be reviewed

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Cosmetic - bigger device images are not displaying correctly

3 participants