Bug 1919231: fix topology quick search modal layout #7902
Conversation
vikram-raj
changed the title
openshift-ci-robot
added
bugzilla/severity-medium
|
@vikram-raj: This pull request references Bugzilla bug 1919231, which is valid. The bug has been moved to the POST state. The bug has been updated to refer to the pull request using the external bug tracker. 3 validation(s) were run on this bug
In response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository. |
|
/kind bug |
openshift-ci-robot
added
the
kind/bug
|
Looks good. One question for @bgliwa01 @openshift/team-devconsole-ux |
|
If we could make the view all sticky that would be great! Thank you! |
@bgliwa01 But that means also that the scrollable area will be really small and you will only see 1 to 1 1/2 items and then "View all". Up to you but hmm 🤔 |
|
IMO if the view is so small to begin with, the user is better off going to the catalog anyways. |
| <div | ||
| ref={ref} | ||
| className="odc-quick-search-modal-body" | ||
| style={{ height: catalogItems?.length > 0 ? '466px' : '60px' }} |
There was a problem hiding this comment.
Something wrong with 466px as it always shows a scrollbar when there are 5 results.
On my browser the height is 467px.
Instead of 60px you can also use undefined.
Lastly, in react '466px' is equivalent to the number 466. Prefer using numbers instead of strings.
There was a problem hiding this comment.
I kept the 60px height because the height of the input field is 60px and it is a child of modal body.
frontend/packages/topology/src/components/quick-search/QuickSearchContent.scss
Outdated
Show resolved
Hide resolved
|
"I'm also ok with getting the current fix in and following up in another issue for the sticky portion." +1 |
|
@christianvogt @bgliwa01 created an issue for sticky footer. |
|
verified this locally |
|
Works to solve the issue. The fix is an improvement and I'll log a separate issue for the remaining issues as they aren't caused by this change. |
|
/approve |
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: bgliwa01, christianvogt, debsmita1, vikram-raj The full list of commands accepted by this bot can be found here. The pull request process is described here
Needs approval from an approver in each of these files:
Approvers can indicate their approval by writing |
openshift-ci-robot
added
the
approved
|
@vikram-raj: All pull requests linked via external trackers have merged: Bugzilla bug 1919231 has been moved to the MODIFIED state. In response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository. |
Fixes:
https://issues.redhat.com/browse/ODC-5278
Analysis / Root cause:
The quick search modal contents aren't scrollable and on small screens the contents is displayed beyond the bounds of the modal container.
Solution Description:
Set content height and add properties
overflow-y: auto.Screen shots / Gifs for design review:
Browser conformance: