Page MenuHomePhorge

Remove bottom margin from embedded remarkup images
ClosedPublic

Authored by bekay on Jan 19 2024, 10:28.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Apr 17, 18:21
Unknown Object (File)
Wed, Apr 17, 06:54
Unknown Object (File)
Apr 4 2024, 01:34
Unknown Object (File)
Mar 31 2024, 05:21
Unknown Object (File)
Mar 31 2024, 05:21
Unknown Object (File)
Mar 31 2024, 05:16
Unknown Object (File)
Mar 31 2024, 04:06
Unknown Object (File)
Mar 30 2024, 13:29

Details

Summary

T15473: Give embedded image files with transparency (alpha channel) a checkered background created a very small but annoying regression. Every embedded images has now an margin at the bottom:

image.png (269×179 px, 11 KB)

I don't think this is intentional. If you click on the margin the image itself is opened not the lightbox. This revision removes the margin.

Test Plan

Look at tasks with embedded images and see if there is still an margin.

Diff Detail

Repository
rP Phorge
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

bekay requested review of this revision.Jan 19 2024, 10:28

I cannot test it now, can you check who was setting that margin? Maybe we can try to avoid that !important

Original change which triggered this: rP324470e39b0d4539a7487c2144157d686f5d0906

There is no margin on top because

body .phabricator-standard-page div.phabricator-remarkup *:first-child,
body .phabricator-standard-page div.phabricator-remarkup .remarkup-header + * {
  margin-top: 0;
}

overwrites

.document-engine-image img,
.phabricator-remarkup-embed-image img {
  margin: 20px auto;
  background: url(data:image/png;base64,.....);
  max-width: 100%;
}

so margin: 20px is only left for the bottom.

I guess we could also split the current CSS into

.document-engine-image img {
  margin: 20px auto;
  background: url('/rsrc/image/checker_light.png');
  max-width: 100%;
}
.phabricator-remarkup-embed-image img {
  background: url('/rsrc/image/checker_light.png');
  max-width: 100%;
}

to avoid this. No strong preferences here. :)

Uh, right. So maybe we can:

.document-engine-image img,
.phabricator-remarkup-embed-image img {
  max-width: 100%;
  background: url('/rsrc/image/checker_light.png');
  max-width: 100%;
}
.document-engine-image img {
  margin: 20px auto;
}

@aklapper @valerio.bozzolan I think the styles for remarkup should stay seperated. We shouldn't blur modular css definitions just to safe some lines or multiple declarations.

It's nice and it works. So... thanks!

sgtm

This revision is now accepted and ready to land.Jan 22 2024, 09:10
aklapper retitled this revision from Removes margin from embedded remarkup images to Remove bottom margin from embedded remarkup images.