UX: always show image preview controls, improve spacing #27489
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This makes it so the image resize/alt-text controls in the composer editor are always visible on desktop, instead of relying on hover (they're already always visible in the mobile preview).
This makes the controls more discoverable, and if we position them over the image, it means we end up with a preview that has spacing much closer to the cooked result.
We planned on doing this long ago, but lost sight of it: https://meta.discourse.org/t/make-it-more-obvious-an-image-is-resizable-when-uploading-an-image/132030
Before:
![image](https://private-user-images.githubusercontent.com/1681963/339911896-55d2f806-0319-48f2-8133-62ae37524c76.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkzNjM0NzQsIm5iZiI6MTcxOTM2MzE3NCwicGF0aCI6Ii8xNjgxOTYzLzMzOTkxMTg5Ni01NWQyZjgwNi0wMzE5LTQ4ZjItODEzMy02MmFlMzc1MjRjNzYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjZUMDA1MjU0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NjIxNTRjMjVkNGIzYmIwZTM5OGU0M2VkZTRmM2FjMTJlYzE1NjNiZmUxZjg5ZjJlN2EwYWIzMjM0Njk3NDk4MyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.d0vGc1YsvrQMvOnHMFOfv2V3HMXZqOLp_FX8dGuiSXk)
After:
![image](https://private-user-images.githubusercontent.com/1681963/339912033-2c6c1668-8aaf-406d-a20d-58fbd7bcf3e5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkzNjM0NzQsIm5iZiI6MTcxOTM2MzE3NCwicGF0aCI6Ii8xNjgxOTYzLzMzOTkxMjAzMy0yYzZjMTY2OC04YWFmLTQwNmQtYTIwZC01OGZiZDdiY2YzZTUucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjZUMDA1MjU0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YzczZDA5NTg2YzhhMGFhNmE1ZWEzNDlhZWU2YTUyZDZkMTlhNzgwYjI5ZmZiMTM3NDA0MTNhNWVjY2E1NjNlZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.SM6kYEArEPeaBAEaUUaTGg_Sl7yXwPMZCsZV3WdY10Y)
and cooked spacing...
Preview before:
![image](https://private-user-images.githubusercontent.com/1681963/339912169-19e45680-5909-4e93-a902-aaf9f4436378.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkzNjM0NzQsIm5iZiI6MTcxOTM2MzE3NCwicGF0aCI6Ii8xNjgxOTYzLzMzOTkxMjE2OS0xOWU0NTY4MC01OTA5LTRlOTMtYTkwMi1hYWY5ZjQ0MzYzNzgucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjZUMDA1MjU0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZTM3Y2RmMWNjODc0OWE0OTRmMTc4ZjAyZGZjN2FhMjAwMTVhN2Q3ZDU1ODg1YTYwZWMzNmQ1MmZiYzc2ZjY1NyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.YY4tSaTcP6YLumn6VI_iaggkBmUtce521UlYnSUZkVk)
Preview after:
![image](https://private-user-images.githubusercontent.com/1681963/339912203-926bf2dd-9419-4134-a580-86bcdb4bc436.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkzNjM0NzQsIm5iZiI6MTcxOTM2MzE3NCwicGF0aCI6Ii8xNjgxOTYzLzMzOTkxMjIwMy05MjZiZjJkZC05NDE5LTQxMzQtYTU4MC04NmJjZGI0YmM0MzYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjZUMDA1MjU0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YTUwZWI4MjY0OTYxZDkxYjBlNDhlY2ZiZGQzMmI1YjdhY2IyOGEwMzM2NDQ5OTM5YTFmNThmYmYyMmUyNGRlNyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.dn7QQiV6YNiAeoaQjIu75zeWI7Pb8IAG6o91vGyC7Kc)
Actual spacing in cooked post:
![image](https://private-user-images.githubusercontent.com/1681963/339912092-18c2e275-7c3d-4e92-860c-f7d67c0c8f9a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkzNjM0NzQsIm5iZiI6MTcxOTM2MzE3NCwicGF0aCI6Ii8xNjgxOTYzLzMzOTkxMjA5Mi0xOGMyZTI3NS03YzNkLTRlOTItODYwYy1mN2Q2N2MwYzhmOWEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjZUMDA1MjU0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZDU2NWY1ZDU3MzFhMzU0OTRiM2YwNDQyNmU4YzVhNmU5Mjg0M2QyMTNjMWE2YTRlMjQ3MTUwNjYyMzBjNTUzMyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.YU_AGCy9yNNA79xMCinASmAZinysqeAyu88kEUCFlpU)
For tiny images... more of the image is obscured this way, but there's a slight transparency so it's still somewhat visible:
Before:
![image](https://private-user-images.githubusercontent.com/1681963/339912431-97d4723f-26ec-4736-8dbd-f348e056bcd0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkzNjM0NzQsIm5iZiI6MTcxOTM2MzE3NCwicGF0aCI6Ii8xNjgxOTYzLzMzOTkxMjQzMS05N2Q0NzIzZi0yNmVjLTQ3MzYtOGRiZC1mMzQ4ZTA1NmJjZDAucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjZUMDA1MjU0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NGQwNWMwMzY5OWFlOTY0YmVlMTdhNWU5Y2M3Y2Y0ZTE3ZWZjNTFmYjk4ZDIwYjRlMzI4ZDk1YWVmN2Y4MzUyZCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.tumgK2l5pV2whnoOBYV1TYtJt5w0zxMlWjsV1Aw_PXo)
After:
![image](https://private-user-images.githubusercontent.com/1681963/339912396-f5622c13-cee9-49f3-b7f3-f5aa582e30a6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkzNjM0NzQsIm5iZiI6MTcxOTM2MzE3NCwicGF0aCI6Ii8xNjgxOTYzLzMzOTkxMjM5Ni1mNTYyMmMxMy1jZWU5LTQ5ZjMtYjdmMy1mNWFhNTgyZTMwYTYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjZUMDA1MjU0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Y2E5ZDg5OWNiNGZhYWExYTQ2YzVhZmQ2OTg4NTI2ODE4NmEyODEyY2YxMmZiODVlOTE2YTBiY2I1ODM4ZjhjZiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.f3YfvlfnMa8ocKX689W8dfCBF87DhlQhq9MLU6LFtnE)
Other states like grid and editing: