feat(cxl-ui): center instructor image

[anoblet]

https://app.clickup.com/t/86b00z797

[github-actions]

size-limit report 📦

Path	Size
packages/cxl-ui/pkg/dist-web/cxl-ui.js	74.41 KB (+0.02% 🔺)
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js	11.89 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js	30.98 KB (0%)
packages/cxl-ui/pkg/dist-web/vendor.js	140.5 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js, packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js, packages/cxl-ui/pkg/dist-web/cxl-ui.js, packages/cxl-ui/pkg/dist-web/manifest.js, packages/cxl-ui/pkg/dist-web/unresolved.js, packages/cxl-ui/pkg/dist-web/vendor.js	258.93 KB (+0.01% 🔺)

[lkraav]

This is still a lot of magic numbers 🤔 is there no way to have some canonical generic numberless positioning formula here?

[anoblet]

I'm having trouble finding a formula that can calculate centering the image(400px) two thirds to the right of the container. The container is absolutely positioned which makes it difficult to just use relative units. I'm trying now in inspector, and using left: calc(50% + 100px) instead of right, looks a bit better. 100px being 1/4 of the width of the image.

[pawelkmpt]

I like left: calc(50% + 100px) more. Easier to understand.

Looks good on @media #{mq.$x-large}
but doesn't look perfect @media #{mq.$large} (1024px) - too close to the right edge.

[pawelkmpt]

I like left: calc(50% + 100px) more. Easier to understand.

Looks good on @media #{mq.$x-large}
but doesn't look perfect @media #{mq.$large} (1024px) - too close to the right edge.

[pawelkmpt]

@anoblet ping

[anoblet]

Although it may seem like more of a magic number, right: calc(27.5% - 200px); displays better across all sizes. The rational behind it was the middle ground between 1/4, and 1/3 minus half of the image width.

[lkraav]

Although it may seem like more of a magic number, right: calc(27.5% - 200px); displays better across all sizes. The rational behind it was the middle ground between 1/4, and 1/3 minus half of the image width.

What about the option of JS inline style calculations based on actual image size?

[pawelkmpt]

Although it may seem like more of a magic number, right: calc(27.5% - 200px); displays better across all sizes. The rational behind it was the middle ground between 1/4, and 1/3 minus half of the image width.

What about the option of JS inline style calculations based on actual image size?

It'd be perfect but this is suppose to be a quick task. We don't want to spend on it more than we already did. Proposed solution is going live.

[lkraav]

It'd be perfect but this is suppose to be a quick task. We don't want to spend on it more than we already did. Proposed solution is going live.

What exactly was spent here? Majority of the time it's been sitting waiting for review. This «giving up» style is a sure way to build into tech debt.