[PR #5878] [MERGED] fix(common): constrain variable tooltip to viewport for long values #5386

New issue

Closed

opened 2026-03-17 02:50:25 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:50:25 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/5878
Author: @aviu16
Created: 2/13/2026
Status: ✅ Merged
Merged: 2/23/2026
Merged by: @jamesgeorge007

Base: next ← Head: fix/variable-value-overflow

📝 Commits (7)

ac8a222 fix(common): constrain variable tooltip to viewport for long values
aac42ed chore: retrigger CI after billing fix
545e5ac chore: retrigger after budget removal
ec8640e fix(tooltip): address review findings for viewport + predefined vars
df3cbe5 chore: cleanup
96988eb refactor(tooltip): resolve latest review notes on constants and a11y text
eceee74 chore: formatting updates

📊 Changes

5 files changed (+661 additions, -32 deletions)

View changed files

📝 packages/hoppscotch-common/assets/themes/tippy-themes.scss (+19 -0)
📝 packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts (+28 -27)
📝 packages/hoppscotch-common/src/helpers/editor/extensions/HoppPredefinedVariables.ts (+18 -5)
➕ packages/hoppscotch-common/src/helpers/utils/__tests__/tooltip.spec.ts (+399 -0)
➕ packages/hoppscotch-common/src/helpers/utils/tooltip.ts (+197 -0)

📄 Description

Summary

Fixes #5876 by making variable tooltips viewport-safe and readable for long values in both environment and predefined variable hover UIs.

What changed

Added shared tooltip utilities for truncation, sizing, and overflow-safe rendering.
Updated environment and predefined variable tooltip rendering to use the shared helpers.
Added constrained tooltip styling to prevent horizontal overflow.
Improved truncation wording and extracted tooltip sizing constants for maintainability.

Validation

Updated tooltip unit tests to cover long-value truncation, viewport constraints, and rendering behavior.
Ran targeted tooltip test suite successfully:
- pnpm exec vitest --run src/helpers/utils/__tests__/tooltip.spec.ts

Notes

Addressed maintainer-requested bot review follow-ups in later commits (ec8640e, 96988eb).

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/5878 **Author:** [@aviu16](https://github.com/aviu16) **Created:** 2/13/2026 **Status:** ✅ Merged **Merged:** 2/23/2026 **Merged by:** [@jamesgeorge007](https://github.com/jamesgeorge007) **Base:** `next` ← **Head:** `fix/variable-value-overflow` --- ### 📝 Commits (7) - [`ac8a222`](https://github.com/hoppscotch/hoppscotch/commit/ac8a222d550f3f02f8ad5d1027342dcca75ac34d) fix(common): constrain variable tooltip to viewport for long values - [`aac42ed`](https://github.com/hoppscotch/hoppscotch/commit/aac42ede76dc337420c4f332caef03b9ad900264) chore: retrigger CI after billing fix - [`545e5ac`](https://github.com/hoppscotch/hoppscotch/commit/545e5acd7bed53ff84c5366cedea714989b11018) chore: retrigger after budget removal - [`ec8640e`](https://github.com/hoppscotch/hoppscotch/commit/ec8640ea1dd5d2f8b33c8bb5c236f442020e20bb) fix(tooltip): address review findings for viewport + predefined vars - [`df3cbe5`](https://github.com/hoppscotch/hoppscotch/commit/df3cbe5bd65fe7494a7e507769dd02b81bf02c0c) chore: cleanup - [`96988eb`](https://github.com/hoppscotch/hoppscotch/commit/96988eb642cf49b994601dfea9b355646a0e33ce) refactor(tooltip): resolve latest review notes on constants and a11y text - [`eceee74`](https://github.com/hoppscotch/hoppscotch/commit/eceee7443f4aef6dbfa55663a935cb648fc0adb1) chore: formatting updates ### 📊 Changes **5 files changed** (+661 additions, -32 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/assets/themes/tippy-themes.scss` (+19 -0) 📝 `packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts` (+28 -27) 📝 `packages/hoppscotch-common/src/helpers/editor/extensions/HoppPredefinedVariables.ts` (+18 -5) ➕ `packages/hoppscotch-common/src/helpers/utils/__tests__/tooltip.spec.ts` (+399 -0) ➕ `packages/hoppscotch-common/src/helpers/utils/tooltip.ts` (+197 -0) </details> ### 📄 Description ## Summary Fixes #5876 by making variable tooltips viewport-safe and readable for long values in both environment and predefined variable hover UIs. ## What changed - Added shared tooltip utilities for truncation, sizing, and overflow-safe rendering. - Updated environment and predefined variable tooltip rendering to use the shared helpers. - Added constrained tooltip styling to prevent horizontal overflow. - Improved truncation wording and extracted tooltip sizing constants for maintainability. ## Validation - Updated tooltip unit tests to cover long-value truncation, viewport constraints, and rendering behavior. - Ran targeted tooltip test suite successfully: - `pnpm exec vitest --run src/helpers/utils/__tests__/tooltip.spec.ts` ## Notes - Addressed maintainer-requested bot review follow-ups in later commits (`ec8640e`, `96988eb`). --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>