fix: Prevent browser profile selection overflow

webrecorder / browsertrix

Browsertrix is the hosted, high-fidelity, browser-based crawling service from Webrecorder designed to make web archiving easier and more accessible for all!

https://webrecorder.net/browsertrix

GNU Affero General Public License v3.0

201 stars 35 forks source link

fix: Prevent browser profile selection overflow #2029

Closed SuaYoo closed 3 months ago

SuaYoo commented 3 months ago

Fixes https://github.com/webrecorder/browsertrix/issues/2019

Changes

Truncates selected browser profile description and refreshes style
Order browser profiles by modified date

Manual testing

Update browser profile to have a long description
Go to new workflow
Go to "Browser Settings"
Choose browser profile with long description. Verify description doesn't overflow

Screenshots

Page	Image/video
Edit Workflow - Browser Settings - no description
Edit Workflow - Browser Settings - with description

SuaYoo commented 3 months ago

@Shrinks99 @emma-sg I just did a quick visual refresh on the selected item disclosure based on what existed, feel free to commit any fast and easy styling changes directly.

Shrinks99 commented 3 months ago

Great layout! Much better :)

Have reverted the inner shadow and darker BG, we've typically used that to signify interactive areas like the copy fields. The inner shadow is a bit less well defined, but I'd rather not use it for content areas / cards?

I also don't think we need to truncate this as we're not limited horizontally here. The text has a 500 char max and if people want to set a long description (hopefully they have a good reason for it!), it's much more useful here if we don't cut it off.

Have committed the above, looks great to me!

SuaYoo commented 3 months ago

Updated per @Shrinks99's suggestion Discord: