New addon: show more costumes in assets list, more than one column about scratchaddons

[CST1229]

I'm thinking of making the left of the costume editor draggable, The more you drag away the more space is there and columns can be added accordingly. (Similar to how you can drag the inspect panel in browsers)

I actually made a userstyle for that a while ago:

:root {
    --default-columns: 1;
}

[class*="selector_wrapper"] {
    width: auto;
    justify-content: center;
}
[class*="selector_list-area"] {
    width: calc(96px * var(--default-columns) + 2em);
    resize: horizontal;
    min-width: calc(96px + 2em);
    
    display: grid;
    align-content: start;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    
    padding: 0 1em;
    padding-bottom: 140px;
    
    gap: 1em;
    
    overflow-x: visible;
    overflow-y: scroll;
    
}
[class*="selector_list-area"] > div {
    margin-bottom: calc(-0.5em - 1em);
    min-width: 5rem;
    flex-grow: 1;
}
[class*="asset-panel_wrapper"] {
    position: relative;
}

[class*="selector_list-area"]::after {
    content: unset;
}

[class*="selector_list-item"][class*="sprite-selector-item_sprite-selector-item"] {
    width: auto;
}
[class*="selector_new-buttons"] {
    width: calc(100% - 16px);
}

oBqQOvVsCl.mp4

[Waakul]

I'm thinking of making the left of the costume editor draggable, The more you drag away the more space is there and columns can be added accordingly. (Similar to how you can drag the inspect panel in browsers)

[mybearworld]

That userstyle doesn't work well with editor-stage-left.

[mybearworld]

I don't think the size of the costume bar changes based on screen size...

[Waakul]

I'm thinking of making the left of the costume editor draggable, The more you drag away the more space is there and columns can be added accordingly. (Similar to how you can drag the inspect panel in browsers)

I actually made a userstyle for that a while ago:

:root {
    --default-columns: 1;
}

[class*="selector_wrapper"] {
    width: auto;
    justify-content: center;
}
[class*="selector_list-area"] {
    width: calc(96px * var(--default-columns) + 2em);
    resize: horizontal;
    min-width: calc(96px + 2em);
    
    display: grid;
    align-content: start;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    
    padding: 0 1em;
    padding-bottom: 140px;
    
    gap: 1em;
    
    overflow-x: visible;
    overflow-y: scroll;
    
}
[class*="selector_list-area"] > div {
    margin-bottom: calc(-0.5em - 1em);
    min-width: 5rem;
    flex-grow: 1;
}
[class*="asset-panel_wrapper"] {
    position: relative;
}

[class*="selector_list-area"]::after {
    content: unset;
}

[class*="selector_list-item"][class*="sprite-selector-item_sprite-selector-item"] {
    width: auto;
}
[class*="selector_new-buttons"] {
    width: calc(100% - 16px);
}

oBqQOvVsCl.mp4

It moves the costume editor and other stuff away. We need to be able to clip it instead.

[mybearworld]

It moves the costume editor and other stuff away. We need to be able to clip it instead.

A way to do this is to add position: absolute to the [class*="selector_wrapper"], and to add a <div style="width: calc(96px + 2em);"></div> before it. Maybe there's a way do it with pure CSS, though.

[mybearworld]

Found something, you can add the width to [class*="asset-panel_detail-area"]::before.

This also resolves it being incompatible with editor-stage-left.

Modified CSS:

:root {
    --default-columns: 1;
}

[class*="asset-panel_detail-area"]::before {
    content: "";
    width: calc(96px + 3em);
}
[class*="selector_wrapper"] {
    width: auto;
    justify-content: center;
    position: absolute;
    height: 100%;
    z-index: 2;
}
[class*="selector_list-area"] {
    width: calc(96px * var(--default-columns) + 2em);
    resize: horizontal;
    min-width: calc(96px + 2em);
    
    display: grid;
    align-content: start;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    
    padding: 0 1em;
    padding-bottom: 140px;
    
    gap: 1em;
    
    overflow-x: visible;
    overflow-y: scroll;
    
}
[class*="selector_list-area"] > div {
    margin-bottom: calc(-0.5em - 1em);
    min-width: 5rem;
    flex-grow: 1;
}
[class*="asset-panel_wrapper"] {
    position: relative;
}

[class*="selector_list-area"]::after {
    content: unset;
}

[class*="selector_list-item"][class*="sprite-selector-item_sprite-selector-item"] {
    width: auto;
}
[class*="selector_new-buttons"] {
    width: calc(100% - 16px);
}

[mybearworld]

You can move it outside of the visible area, which makes it impossible to zoom back in my modified stylesheet:

[Secret-chest]

Why make it horizontal and not a grid?

[mybearworld]

It is a grid, just not when it's that big and there's not enough costumes.
See CST's video above for the behavior

[Waakul]

Found something, you can add the width to [class*="asset-panel_detail-area"]::before.

This also resolves it being incompatible with editor-stage-left.

Modified CSS:

:root {
    --default-columns: 1;
}

[class*="asset-panel_detail-area"]::before {
    content: "";
    width: calc(96px + 3em);
}
[class*="selector_wrapper"] {
    width: auto;
    justify-content: center;
    position: absolute;
    height: 100%;
    z-index: 2;
}
[class*="selector_list-area"] {
    width: calc(96px * var(--default-columns) + 2em);
    resize: horizontal;
    min-width: calc(96px + 2em);
    
    display: grid;
    align-content: start;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    
    padding: 0 1em;
    padding-bottom: 140px;
    
    gap: 1em;
    
    overflow-x: visible;
    overflow-y: scroll;
    
}
[class*="selector_list-area"] > div {
    margin-bottom: calc(-0.5em - 1em);
    min-width: 5rem;
    flex-grow: 1;
}
[class*="asset-panel_wrapper"] {
    position: relative;
}

[class*="selector_list-area"]::after {
    content: unset;
}

[class*="selector_list-item"][class*="sprite-selector-item_sprite-selector-item"] {
    width: auto;
}
[class*="selector_new-buttons"] {
    width: calc(100% - 16px);
}

The min-width doesn't seem responsive....

[mybearworld]

The min-width doesn't seem responsive....

What do you mean?

[Waakul]

The min-width doesn't seem responsive....

What do you mean?

The min-width is supposed to be different on screens with different dimensions else there will be an overlay that can't be dragged to remove.