[PR #79] [MERGED] feat: Remove 5-item limit from variable suggestions and add scrollable UI #133

New issue

Closed

opened 2026-03-01 14:40:13 +03:00 by kerem · 0 comments

kerem commented

2026-03-01 14:40:13 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/arikchakma/maily.to/pull/79
Author: @yousefhosny1
Created: 11/30/2024
Status: ✅ Merged
Merged: 12/1/2024
Merged by: @arikchakma

Base: main ← Head: feat/variable-suggestions

📝 Commits (2)

0435e14 improve variable suggestions UI with scrolling and keyboard navigation
b67d979 fix: minor changes

📊 Changes

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

View changed files

📝 packages/core/src/editor/nodes/variable/variable-suggestions.tsx (+76 -29)
📝 packages/core/tailwind.config.ts (+4 -2)
📝 packages/tailwind-config/package.json (+1 -0)
📝 packages/tailwind-config/tailwind.config.ts (+5 -1)
📝 pnpm-lock.yaml (+13 -0)

📄 Description

Problem

Currently, the variable suggestions dropdown is limited to showing only 5 variables at a time. This restriction prevents users from seeing all available variables when the suggestions list opens, leading to a suboptimal user experience where users can't get a complete overview of their options.

Solution

This PR enhances the variable suggestions UI by:

Removing the artificial limit of 5 variables
Adding a scrollable container with a max height of 16rem (64 tailwind units)

Changes

Removed .slice(0, 5) from the suggestions filter
Added a scrollable container with custom scrollbar styling
Implemented scrollSelectedIntoView function to handle auto-scrolling
Added refs to track suggestion items and scroll container
Reset scroll position when suggestion items change

Screenshots

_{🔄 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/arikchakma/maily.to/pull/79 **Author:** [@yousefhosny1](https://github.com/yousefhosny1) **Created:** 11/30/2024 **Status:** ✅ Merged **Merged:** 12/1/2024 **Merged by:** [@arikchakma](https://github.com/arikchakma) **Base:** `main` ← **Head:** `feat/variable-suggestions` --- ### 📝 Commits (2) - [`0435e14`](https://github.com/arikchakma/maily.to/commit/0435e14760d5c540b7aafd08e7fc44b6ba4865b9) improve variable suggestions UI with scrolling and keyboard navigation - [`b67d979`](https://github.com/arikchakma/maily.to/commit/b67d979c2ffd8448d8528154b62e4a7f4b675089) fix: minor changes ### 📊 Changes **5 files changed** (+99 additions, -32 deletions) <details> <summary>View changed files</summary> 📝 `packages/core/src/editor/nodes/variable/variable-suggestions.tsx` (+76 -29) 📝 `packages/core/tailwind.config.ts` (+4 -2) 📝 `packages/tailwind-config/package.json` (+1 -0) 📝 `packages/tailwind-config/tailwind.config.ts` (+5 -1) 📝 `pnpm-lock.yaml` (+13 -0) </details> ### 📄 Description ## Problem Currently, the variable suggestions dropdown is limited to showing only 5 variables at a time. This restriction prevents users from seeing all available variables when the suggestions list opens, leading to a suboptimal user experience where users can't get a complete overview of their options. ## Solution This PR enhances the variable suggestions UI by: - Removing the artificial limit of 5 variables - Adding a scrollable container with a max height of 16rem (64 tailwind units) ## Changes - Removed `.slice(0, 5)` from the suggestions filter - Added a scrollable container with custom scrollbar styling - Implemented `scrollSelectedIntoView` function to handle auto-scrolling - Added refs to track suggestion items and scroll container - Reset scroll position when suggestion items change ## Screenshots <img width="615" alt="image" src="https://github.com/user-attachments/assets/255c8811-4984-4504-aa74-d685caf91404"> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>