Addons store: Reduce size of addon card

[florian-h05]

Proposal to fix #2205 and fix #1668.

[relativeci]

Job #1311: Bundle Size — 15.83MiB (+0.44%).

f33a79b(current) vs b7270d2 main#1158(baseline)

Important

Bundle introduced 1 and removed 1 duplicate package – View changed duplicate packages

Warning

Bundle introduced 13 new packages: @jsep-plugin/regex, @jsep-plugin/arrow, @jsep-plugin/object and 10 more – View changed packages

Bundle metrics   10 changes 5 regressions 1 improvement

	Current Job #1311	Baseline Job #1158
Initial JS	1.9MiB(+13.74%)	1.67MiB
Initial CSS	609.63KiB(+0.12%)	608.89KiB
Cache Invalidation	93.81%	93.95%
Chunks	217(-0.91%)	219
Assets	683(-0.87%)	689
Modules	3029(+78.18%)	1700
Duplicate Modules	170(+88.89%)	90
Duplicate Code	1.6%(-17.95%)	1.95%
Packages	152(+10.14%)	138
Duplicate Packages	16(+6.67%)	15

Bundle size by type   3 changes 3 regressions

	Current Job #1311	Baseline Job #1158
JS	9.3MiB (+0.5%)	9.25MiB
Other	4.75MiB (+0.47%)	4.73MiB
CSS	861.05KiB (+0.18%)	859.49KiB
Fonts	526.1KiB	526.1KiB
Media	295.6KiB	295.6KiB
IMG	140.74KiB	140.74KiB
HTML	1.23KiB	1.23KiB

---

View job #1311 report View florian-h05:addon-logo-size branch activity

[florian-h05]

This is how it looks (Click me to expand):

[ghys]

Thanks, good attempt. Maybe a few remarks here:

• Could you just fix the horizontal gap between cards so that it matches the vertical one?

• My concerns were firstly that most titles would be truncated (word-wrapping didn't look well), in the above screenshot that's okay because you can guess the truncated word, but in other cases (in the UI tab for instance) it's more difficult. I'm not opposed to a 2-column view for bindings etc. and a single-column view for UI widgets in those cards (with a parameter on the component). But in any case, in the end, the title truncating, well we can live with it. Another idea would be to just not display the "install/remove" button at least when space is too tight, as you can always go to the details and install from there.

• Lastly I considered the fact that having 3 cards on 2 rows doesn't look too good (you have an empty space), but if we're not limiting the amount of "featured" add-ons to 3 in sections in the future then we can have what you find in "app store"-like UIs - a single line of horizontally-scrollable list of cards/ icons.

[florian-h05]

Could you just fix the horizontal gap between cards so that it matches the vertical one?

I tried to fix that, while doing that, I noticed that the vertical gap actually was not to large, but there was no horizontal gap left.

My concerns were firstly that most titles would be truncated (word-wrapping didn't look well), in the above screenshot that's okay because you can guess the truncated word, but in other cases (in the UI tab for instance) it's more difficult.

Yes, that's not nice, but I don't have a better idea ...

I'm not opposed to a 2-column view for bindings etc. and a single-column view for UI widgets in those cards (with a parameter on the component).

The problem is, that this is controlled by CSS, so it is not that easy to control it from JS.

Another idea would be to just not display the "install/remove" button at least when space is too tight, as you can always go to the details and install from there.

I have had a look at this, it feels a bit weird to not have the install/remove button for those, but for the list.

Lastly I considered the fact that having 3 cards on 2 rows doesn't look too good (you have an empty space), but if we're not limiting the amount of "featured" add-ons to 3 in sections in the future then we can have what you find in "app store"-like UIs - a single line of horizontally-scrollable list of cards/ icons.

That is a really nice proposal.