starred/karakeep

Fork 0

mirror of https://github.com/karakeep-app/karakeep.git synced 2026-04-25 07:56:05 +03:00

[PR #1895] [MERGED] fix(extension): constrain height to prevent viewport overflow (#1580) #1926

New issue

Closed

opened 2026-03-02 11:59:47 +03:00 by kerem · 0 comments

kerem commented

2026-03-02 11:59:47 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/karakeep-app/karakeep/pull/1895
Author: @qixing-jk
Created: 9/6/2025
Status: ✅ Merged
Merged: 9/7/2025
Merged by: @MohamedBassem

Base: main ← Head: fix/extension/popover/prevent-viewport-overflow

📝 Commits (7)

55527a9 fix(extension): constrain height to prevent viewport overflow (#1580)
76733e7 refactor(extension): move height control to consumer components
bc39261 feat(extension): introduce dynamic popover height handling
9749d1f feat(extension): improve dynamic popover height handling and styling
93dc2fe feat(extension): replace useEffect with useLayoutEffect for dynamic height
8263b85 feat(extension): enhance dynamic height adjustment with debounce & resize handling
2d6ab68 feat(tags-selector): move create tag option above existing tags (#1840)

📊 Changes

3 files changed (+222 additions, -20 deletions)

View changed files

📝 apps/browser-extension/src/components/ListsSelector.tsx (+4 -3)
📝 apps/browser-extension/src/components/TagsSelector.tsx (+20 -17)
➕ apps/browser-extension/src/components/ui/dynamic-popover.tsx (+198 -0)

📄 Description

Related Issue:
#1580
#1840

Summary

This PR addresses an issue with the expanded list picker placement in the Chrome extension, making it difficult or impossible to choose the first lists when there are many lists. The fix ensures the popover content adapts to the available viewport height, preventing overflow issues.

Key Changes

Problem: The list selector popover was not properly handling viewport constraints, causing the first items to be hidden when opened near the bottom of the screen
Solution: Added h-[var(--radix-popover-content-available-height)] class to the PopoverContent component to dynamically adjust height based on available space
Impact: Users can now access all list items regardless of popover position

User Experience Improvements

Before

Users with over 15 lists experienced difficulty accessing the first list items
Popover would overflow the viewport when opened near the bottom of the screen
No visual indication of additional hidden items

After

Popover automatically adjusts to available viewport height
All list items are accessible regardless of screen position
Improved usability for users with many lists

_{🔄 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/karakeep-app/karakeep/pull/1895 **Author:** [@qixing-jk](https://github.com/qixing-jk) **Created:** 9/6/2025 **Status:** ✅ Merged **Merged:** 9/7/2025 **Merged by:** [@MohamedBassem](https://github.com/MohamedBassem) **Base:** `main` ← **Head:** `fix/extension/popover/prevent-viewport-overflow` --- ### 📝 Commits (7) - [`55527a9`](https://github.com/karakeep-app/karakeep/commit/55527a996e823238ec0e482a8b0948842f829f29) fix(extension): constrain height to prevent viewport overflow (#1580) - [`76733e7`](https://github.com/karakeep-app/karakeep/commit/76733e762fb886e040f4a62029219015afec3e70) refactor(extension): move height control to consumer components - [`bc39261`](https://github.com/karakeep-app/karakeep/commit/bc39261ef122ffaa5c725f59ee339819c24af7f0) feat(extension): introduce dynamic popover height handling - [`9749d1f`](https://github.com/karakeep-app/karakeep/commit/9749d1f3f4d4ff0e931b43f4ad4cac15252238ee) feat(extension): improve dynamic popover height handling and styling - [`93dc2fe`](https://github.com/karakeep-app/karakeep/commit/93dc2fe6acab275563c6888357a4e80e6710618d) feat(extension): replace useEffect with useLayoutEffect for dynamic height - [`8263b85`](https://github.com/karakeep-app/karakeep/commit/8263b85aa413be9d7ae767500b5301c04449fa60) feat(extension): enhance dynamic height adjustment with debounce & resize handling - [`2d6ab68`](https://github.com/karakeep-app/karakeep/commit/2d6ab6852207ae2b0dfd85e00960083d40c5f3ce) feat(tags-selector): move create tag option above existing tags (#1840) ### 📊 Changes **3 files changed** (+222 additions, -20 deletions) <details> <summary>View changed files</summary> 📝 `apps/browser-extension/src/components/ListsSelector.tsx` (+4 -3) 📝 `apps/browser-extension/src/components/TagsSelector.tsx` (+20 -17) ➕ `apps/browser-extension/src/components/ui/dynamic-popover.tsx` (+198 -0) </details> ### 📄 Description # fix: Chrome Extension - Fix popover placement for list selector **Related Issue**: #1580 #1840 ## Summary This PR addresses an issue with the expanded list picker placement in the Chrome extension, making it difficult or impossible to choose the first lists when there are many lists. The fix ensures the popover content adapts to the available viewport height, preventing overflow issues. ## Key Changes ### 🐛 **Popover Height Fix** - **Problem**: The list selector popover was not properly handling viewport constraints, causing the first items to be hidden when opened near the bottom of the screen - **Solution**: Added `h-[var(--radix-popover-content-available-height)]` class to the PopoverContent component to dynamically adjust height based on available space - **Impact**: Users can now access all list items regardless of popover position ## User Experience Improvements ### Before - Users with over 15 lists experienced difficulty accessing the first list items - Popover would overflow the viewport when opened near the bottom of the screen - No visual indication of additional hidden items ### After - Popover automatically adjusts to available viewport height - All list items are accessible regardless of screen position - Improved usability for users with many lists --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

kerem

2026-03-02 11:59:47 +03:00

closed this issue
added the
pull-request
label

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/karakeep#1926

No description provided.

Rows
Columns