Social icons are not clickable in 2-colons block

[Arskrigitsioniets]

Describe the bug
The problem is if a have 2-columns block, where one of the columns is bigger than another one (one of the core templates of Gutenberg), social icons from block "social icons" which go over the column are not clickable, so I can't add a link to them anyway.

To reproduce
Steps to reproduce the behavior:

1. Go to creating a new page
2. Create a 2-columns block, where the left column is smaller than the right
3. Try to add Social Icons block with 10 social icons in the left column
4. Discover that you can't click the last icons.

Screenshots
https://i.imgur.com/TI74yuO.jpg

Editor version (please complete the following information):

• WordPress version: 5.3.2
• Does the website has Gutenberg plugin installed, or is it using the block editor that comes by default? Default

[mapk]

Yep, I was able to recreate this. We should probably have the social icons stack in narrow width containers similarly to how the Navigation block works.

Recreated problem

Current

Proposed

[noahshrader]

I agree with @mapk's suggestion. It follows suit with the navigation block, conforms to the space of the column and of course, improves usability and visual balance.

Also, would like to see the block toolbar not be affected by the hover states of the icons, which you can see in the GIF under the "Recreated problem" section above (the toolbar bumps up and down slightly). Personally, it should keep a consistent distance at the top of the social icons block.

I also noticed that on smaller resolutions/widths, the icons get improperly resized:

[mapk]

Also, would like to not see the block toolbar jumping around going from the first icon in the list to others, which you can see in the GIF under the "Recreated problem" section above. Personally, it should keep a consistent distance at the top of the social icons block.

@noahshrader the reason that toolbar jumps is because it's the toolbar for each individual social link block, so it moves to the particular social entity you're interacting with. If you click on the Social Links bock (the block that contains them all) the toolbar resides where it's expected to be.

Also, good find 👍 on that other problem with resizing.

[noahshrader]

@mapk Edited my prior post. What I'm referring to are the slight bumps with the block toolbar that happen when hovering over icons (because the hover states affect its position). To reproduce:

1. Click the first icon in the list
2. Hover the second icon
3. Hover the first icon

Curious if it would be cleaner for the block toolbar to be unaffected by the hover states of the icons and maintain a consistent Y position.

[mapk]

Ah yes! Excellent. Thank you. 😄

[cpapazoglou]

It seems that all points are addressed here #25334