Skip to content

Commit

Permalink
Fix audio content overflow in windows. (#944)
Browse files Browse the repository at this point in the history
/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 -->
  • Loading branch information
prateekkalra authored Oct 19, 2023
1 parent 2c15662 commit eba52a5
Showing 1 changed file with 8 additions and 0 deletions.
8 changes: 8 additions & 0 deletions apps/builder/src/assets/styles/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

1 comment on commit eba52a5

@vercel
Copy link

@vercel vercel bot commented on eba52a5 Oct 19, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

builder-v2 – ./apps/builder

app.typebot.io
builder-v2-typebot-io.vercel.app
builder-v2-git-main-typebot-io.vercel.app

Please sign in to comment.