[fix] Fixes visual regression with st.audio_input waveform
#13010
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Added `waveformPadding` parameter to `useWaveformController` for customizable padding. - Updated height calculation in waveform rendering to account for padding. - Integrated `waveformPadding` in `AudioInput` component for consistent usage. - Removed unnecessary padding styles from `StyledWaveSurferDiv` to streamline layout.
Contributor
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
Contributor
✅ PR preview is ready!
|
Restores 4px vertical padding that was lost during the refactor to useWaveformController. The padding is now handled programmatically by reducing the WaveSurfer height rather than CSS padding, since absolutely positioned children ignore parent padding. Changes: - Add optional waveformPadding parameter to useWaveformController - When padding > 0: calculate height = container height - (2 × padding) - When padding = 0 (default): use height="auto" for edge-to-edge fill - AudioInput passes waveformPadding: 4 for proper spacing - ChatInput uses default (0) to maintain edge-to-edge behavior - Add waveformPadding to useCallback dependency array (fixes ESLint) This approach: - Fixes AudioInput waveform padding without affecting ChatInput - Preserves the critical CSS for stacking recording/playback instances - Avoids CSS-based padding that doesn't work with absolute positioning
sfc-gh-nbellante
added
security-assessment-completed
sfc-gh-nbellante
changed the title
st.audio_input waveform
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR fixes a visual regression in st.audio_input where the waveform was filling 100% of the container height, causing it to touch the edges. The fix changes the approach from CSS padding on the container to calculating a reduced height for the WaveSurfer instance itself.
Key Changes:
- Removed CSS
paddingTopandpaddingBottomfromStyledWaveSurferDivthat was causing incorrect waveform sizing - Added a new
waveformPaddingparameter touseWaveformControllerhook to control vertical padding programmatically - Modified WaveSurfer height calculation to subtract padding when specified, using
convertRemToPxto convert theme values to pixels
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| frontend/lib/src/components/widgets/AudioInput/styled-components.ts | Removed CSS padding properties from StyledWaveSurferDiv that were incorrectly applied |
| frontend/lib/src/components/widgets/AudioInput/AudioInput.tsx | Added waveformPadding: 4 parameter when initializing the waveform controller |
| frontend/lib/src/components/audio/core/useWaveformController.ts | Added waveformPadding parameter and logic to calculate WaveSurfer height with padding subtracted, included waveformPadding in dependency array |
Co-authored-by: Copilot <[email protected]>
Updated the AudioInput component to include a descriptive comment for the waveformPadding property, clarifying its purpose in preventing the waveform from touching the edges. This improves code readability and maintainability.
sfc-gh-bnisco
approved these changes
Nov 17, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Describe your changes
I noticed yesterday during the demos that there was a slight visual regression on
st.audio_input. The waveform would fill 100% of the height of the component. Luckily, we haven't released this yet, and it is resolved in this PR.Why was it not caught by snapshot tests? Because getting a deterministic screenshot of a moving waveform (or even just a waveform) is a difficult challenge.
Before fix
After fix
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.