fixed homepage layout when quick-access is on/visible#2346
fixed homepage layout when quick-access is on/visible#2346rohitratannagar wants to merge 3 commits intoredhat-developer:mainfrom
Conversation
Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>
rohitratannagar
requested review from
a team,
Eswaraiahsapram and
christoph-jerolimov
as code owners
Changed Packages
|
Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>
Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>
|
|
Thank you @rohitratannagar for this improvement, this looks so much better! |
Eswaraiahsapram
left a comment
Eswaraiahsapram
left a comment
There was a problem hiding this comment.
Thanks @rohitratannagar 🎉 ,
I added a few comments. PTAL
| }, | ||
|
|
||
| '@container (min-width: 1300px)': { | ||
| width: '20%', |
There was a problem hiding this comment.
If we set each card’s width to 20%, four cards will only occupy 80% of the container. Because of this, there’s unused space on the right side when the screen width is larger than 1300px.
| }, | ||
|
|
||
| '@container (min-width: 1200px)': { | ||
| width: '25%', |
There was a problem hiding this comment.
Here, the width should be dynamic. When the entity image card is closed, we display four cards; when it’s open, we display three cards including the image card. So the width should adjust based on whether the entity image card is shown or hidden. With the current implementation, there’s empty space on the right side (refer attachment), which isn’t expected.
| const responsiveGridItem2 = { | ||
| width: '100%', | ||
|
|
||
| '@container (min-width: 600px)': { | ||
| width: '50%', | ||
| }, | ||
|
|
||
| '@container (min-width: 900px)': { | ||
| width: '25%', | ||
| }, | ||
|
|
||
| '@container (min-width: 1200px)': { | ||
| width: '20%', | ||
| }, | ||
| }; |
There was a problem hiding this comment.
Same as above — we need to make sure this works correctly for all cases.
| const responsiveGridItem3 = { | ||
| width: '100%', | ||
|
|
||
| '@container (min-width: 600px)': { | ||
| width: '50%', | ||
| }, | ||
| '@container (min-width: 1200px)': { | ||
| width: '40%', | ||
| }, | ||
| }; |
| const responsiveGridItem1 = { | ||
| width: '100%', | ||
|
|
||
| '@container (min-width: 600px)': { | ||
| width: '50%', | ||
| }, | ||
|
|
||
| '@container (min-width: 900px)': { | ||
| width: '25%', | ||
| }, | ||
|
|
||
| '@container (min-width: 1200px)': { | ||
| width: '20%', | ||
| }, |
There was a problem hiding this comment.
Same here — for Templates, we’re also showing four cards, and with the current logic, it results in empty space on the right side.
3 participants
Hey, I just made a Pull Request!
Description
Fixes
UI Before Change
UI After Change
Screen.Recording.2026-02-18.at.12.33.04.PM.mov
✔️ Checklist