Mintplex-Labs/anything-llm
1
0
Fork 0
mirror of https://github.com/Mintplex-Labs/anything-llm.git synced 2026-07-19 14:13:35 -04:00
Code Issues 328 Packages Projects Releases 10 Wiki Activity

[PR #5549] [MERGED] fix: tools popover overflowing screen on small viewports #5477

New Issue
Closed
opened 2026-06-05 15:21:28 -04:00 by yindo · 0 comments
yindo commented 2026-06-05 15:21:28 -04:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/Mintplex-Labs/anything-llm/pull/5549
Author: @angelplusultra
Created: 4/28/2026
Status: ✅ Merged
Merged: 5/1/2026
Merged by: @timothycarambat

Base: master ← Head: 5530-bug-cannot-scroll-to-bottom-of-fully-populated-slash-command-entries

📝 Commits (4)

  • 233c227 fix tools popover from expanding beyond screen height limits
  • 9dbb10a fix max height clamp | remove unneeded useLayoutEffect dependency
  • b05e1ac Merge branch 'master' into 5530-bug-cannot-scroll-to-bottom-of-fully-populated-slash-command-entries
  • 5947120 Merge branch 'master' into 5530-bug-cannot-scroll-to-bottom-of-fully-populated-slash-command-entries

📊 Changes

1 file changed (+31 additions, -4 deletions)

View changed files

📝 frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/ToolsMenu/index.jsx (+31 -4)

📄 Description

Pull Request Type

  • ✨ feat (New feature)
  • 🐛 fix (Bug fix)
  • ♻️ refactor (Code refactoring without changing behavior)
  • 💄 style (UI style changes)
  • 🔨 chore (Build, CI, maintenance)
  • 📝 docs (Documentation updates)

Relevant Issues

resolves #5530

Description

The Tools popover (Slash Commands / Agent Skills) used a static viewport-based max-height (max-h-[min(360px, calc(100dvh - 25rem))] in centered mode, ... - 11rem otherwise). On shorter windows — or when the centered home view's heading pushes the input lower — the calculation didn't reflect the popover's actual position, so the popover bottom would render below the viewport. Combined with the inner container's no-scroll class hiding the scrollbar, users had no way to reach the bottom entries.

This replaces the static class with a useLayoutEffect that measures the popover's getBoundingClientRect() and computes the real available space, then applies it via inline style={{ maxHeight }}. It recomputes on resize and is clamped to [160px, 360px].

  • Centered mode (popover opens below input): window.innerHeight - rect.top - 16
  • Non-centered mode (popover opens above input): rect.bottom - 16

The no-scroll class is preserved, so the scrollbar stays hidden — users still scroll via mouse wheel / trackpad / arrow keys, but the popover now never extends past the viewport edge.

Visuals (if applicable)

Additional Information

No behavior change in normal-sized windows where the static 360px cap was already fitting; the dynamic calc only kicks in when available space is less than 360px.

Developer Validations

  • I ran yarn lint from the root of the repo & committed changes
  • Relevant documentation has been updated (if applicable)
  • I have tested my code functionality
  • Docker build succeeds locally

🔄 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/Mintplex-Labs/anything-llm/pull/5549 **Author:** [@angelplusultra](https://github.com/angelplusultra) **Created:** 4/28/2026 **Status:** ✅ Merged **Merged:** 5/1/2026 **Merged by:** [@timothycarambat](https://github.com/timothycarambat) **Base:** `master` ← **Head:** `5530-bug-cannot-scroll-to-bottom-of-fully-populated-slash-command-entries` --- ### 📝 Commits (4) - [`233c227`](https://github.com/Mintplex-Labs/anything-llm/commit/233c227ebf433508c82936628160ef93a1ade450) fix tools popover from expanding beyond screen height limits - [`9dbb10a`](https://github.com/Mintplex-Labs/anything-llm/commit/9dbb10a1d9646b32a98ee09a955443de7392c92c) fix max height clamp | remove unneeded useLayoutEffect dependency - [`b05e1ac`](https://github.com/Mintplex-Labs/anything-llm/commit/b05e1ac3557dbfc655ca83176fa7679b112e9a51) Merge branch 'master' into 5530-bug-cannot-scroll-to-bottom-of-fully-populated-slash-command-entries - [`5947120`](https://github.com/Mintplex-Labs/anything-llm/commit/59471209250cd5bbd46de048fe1f19624895fab6) Merge branch 'master' into 5530-bug-cannot-scroll-to-bottom-of-fully-populated-slash-command-entries ### 📊 Changes **1 file changed** (+31 additions, -4 deletions) <details> <summary>View changed files</summary> 📝 `frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/ToolsMenu/index.jsx` (+31 -4) </details> ### 📄 Description ### Pull Request Type <!-- For change type, change [ ] to [x]. --> - [ ] ✨ feat (New feature) - [x] 🐛 fix (Bug fix) - [ ] ♻️ refactor (Code refactoring without changing behavior) - [ ] 💄 style (UI style changes) - [ ] 🔨 chore (Build, CI, maintenance) - [ ] 📝 docs (Documentation updates) ### Relevant Issues resolves #5530 ### Description The Tools popover (Slash Commands / Agent Skills) used a static viewport-based max-height (`max-h-[min(360px, calc(100dvh - 25rem))]` in centered mode, `... - 11rem` otherwise). On shorter windows — or when the centered home view's heading pushes the input lower — the calculation didn't reflect the popover's actual position, so the popover bottom would render below the viewport. Combined with the inner container's `no-scroll` class hiding the scrollbar, users had no way to reach the bottom entries. This replaces the static class with a `useLayoutEffect` that measures the popover's `getBoundingClientRect()` and computes the real available space, then applies it via inline `style={{ maxHeight }}`. It recomputes on `resize` and is clamped to `[160px, 360px]`. - Centered mode (popover opens below input): `window.innerHeight - rect.top - 16` - Non-centered mode (popover opens above input): `rect.bottom - 16` The `no-scroll` class is preserved, so the scrollbar stays hidden — users still scroll via mouse wheel / trackpad / arrow keys, but the popover now never extends past the viewport edge. ### Visuals (if applicable) <!-- Add screenshots or screen recordings to demonstrate the changes, especially for UI updates. --> ### Additional Information No behavior change in normal-sized windows where the static 360px cap was already fitting; the dynamic calc only kicks in when available space is less than 360px. ### Developer Validations - [x] I ran `yarn lint` from the root of the repo & committed changes - [x] Relevant documentation has been updated (if applicable) - [x] I have tested my code functionality - [x] Docker build succeeds locally --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
yindo added the pull-request label 2026-06-05 15:21:28 -04:00
yindo closed this issue 2026-06-05 15:21:29 -04:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Desktop
Docker
Integration Request
Integration Request
OS: Linux
OS: Mobile
OS: Windows
UI/UX
blocked
bug
bug
core-team-only
documentation
duplicate
embed-widget
enhancement
feature request
github_actions
good first issue
investigating
needs info / can't replicate
possible bug
pull-request
Mirrored from GitHub Pull Request
 question
stage: specifications
wontfix
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Mintplex-Labs/anything-llm#5477
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?