Bottom border of collapsed cell looks messy

[connor4312]

Testing #103887

The extra border here looks rather messy:

If we want to indicate there's folded content, maybe a light or dashed border aligned with the vertical centerline of the folded icon would look better?

[rebornix]

IMHO the bottom border for the collapsed outputs is not intuitive. I'm wondering if we can show a gray italic text "collapsed outputs" cc @misolori ?

[miguelsolorio]

We could either add a ... in place:

Or add text:

I think I like the simpler ... approach and we can show a title tooltip when you hover over it

[roblourens]

If we have a ... do we need the other expand codicon button? A ... button is literally just Jupyter's solution. Not opposed to it though.

[miguelsolorio]

I would still keep our expand icon on the side, it’s more intuitive. The ... by itself is but vague. We also show the ... on folded regions in the editor And show the folded chevron on the side, so it aligns there.

[connor4312]

To me having the folded icon beside the ... icon feels weird. We basically have two icons that do and mean the same thing. I prefer the text version.

[miguelsolorio]

@connor4312 but isn't that the same behavior in editor though?

We could move the ... to the middle of the cell so that it's an easier place for users to reach it if their mouse is on the opposite side of the screen?

[connor4312]

Yea, but in the editor the context is different -- the gutter shows me my blocks (which just happens to be collapsed in this instance) while the editor shows me the content, which it indicates is collapsed.

... to the middle I think would look nicer. Particularly if we decide to make the whole bar clickable. This is similar to what the Azure portal does extensively

[miguelsolorio]

Oh I definitely like that. One thing we'd need to work around is how it looks when it's centered because of our add new cell buttons:

[miguelsolorio]

Collapsed cell has been updated: