fix(popover): fix large popover overflow in smaller screens #628

[airikej]

Summary by CodeRabbit

• Bug Fixes
  • Corrected popover width calculation to respect parent container layout constraints instead of viewport dimensions.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 0fdda8dd-c0e6-4d12-8b6e-ffa22f02bd7c

📥 Commits

Reviewing files that changed from the base of the PR and between 7285c2a and 8b46f90.

📒 Files selected for processing (1)

• src/tedi/components/overlays/popover/popover.module.scss

---

📝 Walkthrough

Walkthrough

This PR adjusts the popover component's width calculation to respect parent container constraints instead of viewport width. The size-variant rule now uses container-relative width (100%) instead of viewport width (100vw), changing the calc() fallback accordingly.

Changes

Popover Width Constraint

Layer / File(s)	Summary
Popover width calculation for container constraints src/tedi/components/overlays/popover/popover.module.scss	The width: min(...) rule for popover size variants was updated to use container-relative width by changing the calc() fallback from calc(100vw - 1rem) to calc(100% - 1rem).

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related issues

• #628: The width fallback change directly addresses the popover overflow issue caused by viewport width usage, replacing it with container-relative sizing.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main fix: resolving popover overflow issues on smaller screens by addressing the width calculation problem.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/628-popover-popover-widthlarge-is-too-large-when-vertical-scrollbar-is-present-on-the-page

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 Stylelint (17.11.1)

src/tedi/components/overlays/popover/popover.module.scss

ConfigurationError: Could not find "stylelint-config-recess-order". Do you need to install the package or use the "configBasedir" option?
at getModulePath (file:///usr/local/lib/node_modules/stylelint/lib/utils/getModulePath.mjs:29:9)
at loadExtendedConfig (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:285:21)
at extendConfig (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:252:25)
at async augmentConfigBasic (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:85:20)
at async augmentConfigFull (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:138:24)
at async getConfigForFile (file:///usr/local/lib/node_modules/stylelint/lib/getConfigForFile.mjs:102:26)
at async resolveOptionValue (file:///usr/local/lib/node_modules/stylelint/lib/utils/resolveOptionValue.mjs:27:24)
at async standalone (file:///usr/local/lib/node_modules/stylelint/lib/standalone.mjs:127:22)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!