Andras/BoundlessFlowCampus2K

Fork 0

#468-grid-cell-size-based-on-screen-width #562

Merged

c24elipe merged 4 commits from #468-grid-cell-size-based-on-screen-width into team_2_week_3

2026-04-28 07:27:35 +00:00

b24idalu commented

2026-04-24 16:52:12 +00:00

Collaborator

Regarding issue #468, creating cell sizes based on screen width.

Problems: 1. Create good amount of column depending on screen width, 2. Create squares

Solution: 1. Creates column based on breakpoints, the amount of columns set are picked based on how much the user should be able to make a noticeable difference. 2. Since column sizes can differ a lot depending on how big one's screen is (one breakpoint can cover multiple screen sizes), the row size is based on the middle value of all column sizes within one breakpoint. This creates close enough to squares.

Possible improvements:

Could base the row sizes based on the most common widths within each breakpoint, but if that value is too high/low it could look weird for the rest
Could make nicer squares through formulas, but it may make sizing more difficult to work with in the future

Regarding issue [#468](https://git.webug.se/Andras/BoundlessFlowCampus2K/issues/468), creating cell sizes based on screen width. Problems: 1. Create good amount of column depending on screen width, 2. Create squares Solution: 1. Creates column based on breakpoints, the amount of columns set are picked based on how much the user should be able to make a noticeable difference. 2. Since column sizes can differ a lot depending on how big one's screen is (one breakpoint can cover multiple screen sizes), the row size is based on the middle value of all column sizes within one breakpoint. This creates close enough to squares. Possible improvements: - Could base the row sizes based on the most common widths within each breakpoint, but if that value is too high/low it could look weird for the rest - Could make nicer squares through formulas, but it may make sizing more difficult to work with in the future

b24idalu added 2 commits

2026-04-24 16:52:12 +00:00

Cells are now almost squares d891b1a178

Cells are now almost squares

Added columns based on breakpoints 2820ffd1e4

Added columns based on breakpoints and removed previous option.

b24idalu self-assigned this

2026-04-24 16:52:16 +00:00

b24idalu added the

needs review

label

2026-04-24 16:52:27 +00:00

c24elipe requested review from j21marbr

2026-04-27 07:33:34 +00:00

a24vinla commented

2026-04-27 08:01:09 +00:00

Collaborator

We are otherwise very pleased with the solution. Since this probably isn't the last time we make decision on grid sizes it is really good that the "config" can be changed easily.

After discussion with other team leaders/issue coordinators we decided that the grid should have only two breakpoints: 8 columns when in split screen to full size and 4 columns when smaller. We don't feel it is necessary to have more columns, and react-grid-layout does not seem to handle having too many columns to well. We are otherwise very pleased with the solution. Since this probably isn't the last time we make decision on grid sizes it is really good that the "config" can be changed easily.

j21marbr commented

2026-04-27 08:02:00 +00:00

Collaborator

Review on #468

What's done

Tested on macOS using Chrome

Verified that the number of columns updates based on screen width by resizing the window
The cells are close to square and the layout updates correctly

Inspected files

Dashboard.js

What needs to be done

No issue was found

Conclusion

The changes looks correct and the code is ready to be merged.

## Review on #468 ### What's done Tested on macOS using Chrome - Verified that the number of columns updates based on screen width by resizing the window - The cells are close to square and the layout updates correctly #### Inspected files Dashboard.js #### What needs to be done No issue was found #### Conclusion The changes looks correct and the code is ready to be merged.

b24idalu added 1 commit

2026-04-27 08:11:08 +00:00

Updates sizes on request 879e8b9290

Updates sizes on request, and changed variable name to make it more obvious what it was.

b24idalu removed the

needs review

label

2026-04-27 08:12:25 +00:00

b24idalu commented

2026-04-27 08:26:19 +00:00

Author

Collaborator

This is with smaller rectangles
This is with squares

![image](/attachments/3e605313-2623-474d-b637-ebf28aaf2b1d) This is with smaller rectangles ![image](/attachments/b844fa6a-861a-4985-b82b-618efc49f408) This is with squares

image.png

48 KiB

image.png

48 KiB