blsmedia/bot
2
0
Fork 0
Code Activity

Fix audio content overflow in windows. (#944)

Browse Source 
/claim #667

The volume slider in audio element in windows chrome overflows.
Possible fixes:
1. Change the width of audio blocks. (Not suggested, as the width of all
blocks should be consistent)
2. Adjust the audio sub elements, so it doesn't overflow.(IMPLEMENTED)

It's not so straightforward to apply customization to audio tag element.
The best possible way I could find, to make the app look good, is by
hiding the timeline track in the audio. It was showing up very small
anyway(due to block width), so there shouldn't be an issue.
Please look at the before & after videos below.


https://github.com/baptisteArno/typebot.io/assets/29385192/f61c5b58-834d-470f-b684-bd82181e07f4



https://github.com/baptisteArno/typebot.io/assets/29385192/88f932eb-dc7e-4346-bf64-6405a015013e


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
### Summary by CodeRabbit

- Style: Improved the visual layout of the audio player on Windows. The
update includes a cleaner interface by hiding the track timeline and
adjusting the media controls panel. This change enhances the user
experience by providing a more streamlined and intuitive audio player
design.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Prateek Kalra
2023-10-19 18:09:38 +05:30
committed by GitHub
parent 2c15662ef2
commit eba52a5397
1 changed files with 8 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/builder/src/assets/styles/custom.css
View File

@ -22,3 +22,11 @@
opacity: 1 !important;
visibility: visible !important;
} */
/*Hide track timeline in audio tag in Windows*/
audio::-webkit-media-controls-timeline{
display:none;
}
audio::-webkit-media-controls-panel{
justify-content:space-between;
}