Skip to content

#5543 Fix home database table scrolling #6124

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
roshil1206 wants to merge 1 commit into
base: main
Choose a base branch
from
+8 −3
Open

#5543 Fix home database table scrolling #6124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion redisinsight/ui/src/pages/home/components/databases-list/DatabasesList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const DatabasesList = () => {
defaultPagination={getDefaultPagination()}
onPaginationChange={handlePaginationChange}
defaultSorting={DEFAULT_SORTING}
maxHeight="60rem" // this enables vertical scroll
style={{ maxHeight: '100%' }}

@chatgpt-codex-connector chatgpt-codex-connector Bot Jun 28, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Pass maxHeight to Table to keep scrolling enabled

When the Home list is taller than the available viewport, this no longer uses the Redis UI Table maxHeight prop that creates/sizes the table's internal scroll area; it only applies a plain CSS max-height to the outer component. Since this commit also changes .homePage to overflow: hidden, rows beyond the available height can be clipped instead of scrollable. Keep the height constraint on the table API, e.g. maxHeight="100%", rather than moving it into style.

Useful? React with 👍 / 👎.

/>
<BulkItemsActions items={selectedInstances} onClose={resetRowSelection} />
</>
Expand Down
9 changes: 7 additions & 2 deletions redisinsight/ui/src/pages/home/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,14 @@
padding: 1px 16px 16px !important;

:global {
.RI-page-body {
min-height: 0;
}

.homePage {
height: calc(100% - 60px);
overflow-y: auto;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
/* Inset on all sides so table card chrome is not clipped by this scrollport */
padding: 1px;
}
Expand Down