Skip to content

Overflown project action buttons #6954

@DNin01

Description

@DNin01

Description

This is what the row of project action buttons usually looks like:
Project action buttons next to project statistics

But due to space constraints, sometimes the row of buttons for project actions like copying the link, reporting, and adding a project to a studio (among other actions part of addons from Scratch Addons) can overflow into another row, like this:
Overflown project action buttons row
This is usually caused by addons that add buttons to this row, and happens when the view counter and the share timestamp overlap, causing the entire row of action buttons, which are all in the same divider element, to wrap. Here's a video where I have revealed the flexboxes as I resize a button until it is wide enough to cause the row to wrap:

Button.row.overlap.with.flexboxes.revealed.mp4

However, in rare cases, it can also happen in unmodified Scratch if a project gets so much attention that the love, favorite, and view counters take up enough space to overlap with the share timestamp's usual position, as is the case here:
Overflown project action buttons row on popular project

With enough buttons, the row of buttons itself can also span multiple rows:
Overflown project action buttons row on own project spanning two rows
Download button from #6931

I was just wondering if there was anything we could do about this? I know, I know, here I am again complaining about things taking up too much space, but I think it's worth at least knowing about this.

Having the buttons placed under where they usually go is not a big deal - you learn to live with it, but there are a couple other reasons I'm creating this issue:

  1. Image 4 where the button row itself is crowded and the wrapping button rows are touching each other. This could be fixed by preventing the button row from overflowing and wrapping, even if they take up too much-- let me just show you what I mean:
    Overflown project action buttons row extending past project statistics
    Compare that to image 4, where the buttons would not extend past the project statistics row. All I needed to do that was just move the divider element for those buttons and change some style rules.
  2. Just to encourage considering if there are any better places for some buttons. I'm not sure where else the "Set Thumbnail" and "Download" buttons could go, but for "Remix Tree", I propose New remix tree link placement option #6097.
  3. It is inconsistent. Sometimes they wrap, and sometimes they don't. Maybe they could always be moved down if addons are enabled that add more buttons, for consistency, to at least help make it feel a little more natural? Or maybe the way they wrap if there are too many could be changed:
    Better project action buttons overflow

If at least those problems could be fixed, I'd be happy.

Steps to reproduce

Just visit the page of a project. For the best results, enable addons that add buttons next to this button row and find a well-known shared project.

Environment

Window size: about 1800 x 900

Metadata

Metadata

Assignees

No one assigned

    Labels

    scope: addon apiRelated to the addon.* JS APIs or other ways for addons to provide featuresscope: addon compatiblityCompatiblity issue between two or more addonsscope: upstreamRelated to something we depend on (like Scratch, a library, or the browser)type: bugA bug in the addon loader, or in a specific addon

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions