FlowFuse / FlowFuse/node-red-dashboard

Grid layout - more steps for media query to support bigger screens

Open
#564 0 comments 0 reactions 0 assignees View on GitHub
task
Dominant language
HTML
Stars
355
Forks
82
Avg merge
4d 23h
Merged PRs (30d)
24

Description

### Description

Currently with the media query there is 3 steps for different screen sizes.
Max column count affects screens over 1024px width which then results in 12 columns.
This may be kind of OK for laptop but for modern desktop the zoom factor is way too high.

It is hard for me to advise the strategy of breakpoints to choose.
But if to continue gow by 3 columns in every reasonable amount of px may do the thing. For sure there is users with ultra wide screens, but somewhere of course the limit is reasonable. Just the current solution is a bit poor.

.nrdb-layout--grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
flex-wrap: wrap;
padding: var(--page-padding);
gap: var(--group-gap);
}

@media only screen and (max-width: 1024px) {
.nrdb-layout--grid {
grid-template-columns: repeat(9, 1fr);
}
}

@media only screen and (max-width: 768px) {
.nrdb-layout--grid {
grid-template-columns: repeat(6, 1fr);
}
}

### Epic/Story

_No response_

### Have you provided an initial effort estimate for this issue?

I can not provide an initial effort estimate

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.