Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(astro): positioning of inspection tooltip in RTL mode #11081

Merged
merged 4 commits into from
May 21, 2024

Conversation

V3RON
Copy link
Contributor

@V3RON V3RON commented May 17, 2024

Changes

In RTL mode (<body dir="rtl"> the inspection tooltip tend to overflow on the left side of the page.
This pull request contains a fix for that, which will make sure the tooltip stays in the viewport.

Before:

Nagranie.z.ekranu.2024-05-17.o.09.15.52.mov

After:

Nagranie.z.ekranu.2024-05-17.o.09.16.16.mov

Closes #11044

Testing

Playwright test was added to make sure the tooltip stays in the viewport in all edge-cases (corners).
Note: There is one thing I am not fully satisfied with. I couldn't use visibility ratio of 1 (fully visible), because for some reason elements positioned absolutely overflow plus scrollbar is being displayed without reason. If anyone has an idea how to prevent that, please share it 🙏

Docs

No update needed.

Copy link

changeset-bot bot commented May 17, 2024

🦋 Changeset detected

Latest commit: 6c09ca1

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions bot added the pkg: astro Related to the core `astro` package (scope) label May 17, 2024
Copy link
Member

@bluwy bluwy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great to me. I think another way to test it is doing something like:

const tooltipBox = await tooltip.boundingBox();
const { clientWidth, clientHeight } = await page.evaluate(() => ({
clientWidth: document.documentElement.clientWidth,
clientHeight: document.documentElement.clientHeight,
}));
expect(tooltipBox.x + tooltipBox.width).toBeLessThan(clientWidth);
expect(tooltipBox.y + tooltipBox.height).toBeLessThan(clientHeight);

But the current one is also fine by me.

Copy link
Member

@Princesseuh Princesseuh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great, thank you!

@Princesseuh Princesseuh merged commit af42e05 into withastro:main May 21, 2024
13 checks passed
@astrobot-houston astrobot-houston mentioned this pull request May 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pkg: astro Related to the core `astro` package (scope)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Inspect Popup exceeds window
3 participants