- Use atomic update pattern in backend: collect logs into temp variable
before replacing outputs (prevents empty state flash)
- Remove per-line x-effect directives that caused 4000+ reactive
evaluations on every update
- Replace inline Alpine.js class bindings with CSS utility classes
- Use single $watch and morph.updated hook instead of renderTrigger
- Remove HTML entity decode cache (no longer needed)
- Fix search highlight padding that caused text shifting
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Use CSS content-visibility: auto for lazy rendering of off-screen log lines
- Replace setInterval auto-scroll with requestAnimationFrame for smoother scrolling
- Cache HTML entity decoding to avoid repeated DOMParser calls (up to 5000 entries)
- Cache match count calculations to prevent repeated DOM queries
- Debounce search input (300ms) in deployment logs view
- Debounce Livewire render updates (100ms) to batch rapid changes
- Add log-line utility class with content-visibility optimization
- Add log-highlight utility class for search result highlighting
These changes address browser freezing when viewing deployment logs with
3500+ lines (GitHub issue #7668). The content-visibility CSS property lets
the browser skip rendering of off-screen content, significantly reducing
initial render time and memory usage.
Fixes#7668
- Updated dashboard, destination, project, and server views to replace 'box' class with 'coolbox' for improved visual consistency.
- Modified links and buttons in shared variables and scheduled tasks views to utilize 'coolbox' class.
- Ensured all relevant components reflect the new styling approach, enhancing user experience and interface coherence.
Replace border-based left indicator with inset box-shadow to prevent unwanted layout shifts when focusing or marking fields as dirty. The solution reserves 4px space with transparent shadow in default state and transitions to colored shadow on focus/dirty without affecting the box model. Update all form components (input, textarea, select, datalist) for consistency.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added focus-visible styles for buttons and links to improve accessibility and user experience.
- Updated button utility styles to include focus-visible states for better visual feedback.
- Enhanced dropdown item styles to support focus-visible states, ensuring consistent interaction design.
- Changed the projects property in the Dashboard component from an array to a Collection for improved data handling.
- Added new color variables in CSS for better theming options.
- Updated button styles across various components for consistency and improved user experience.
- Refined dropdown and notification components for better visual alignment and usability.
