diff --git a/packages/flat-pages/src/components/UserWindows.less b/packages/flat-pages/src/components/UserWindows.less index 86e434aea75..7a8859f5753 100644 --- a/packages/flat-pages/src/components/UserWindows.less +++ b/packages/flat-pages/src/components/UserWindows.less @@ -19,9 +19,10 @@ &.is-grid { display: flex; + flex-wrap: wrap; .window { - flex: 1; + flex: 1 0 21%; display: flex; } } @@ -35,3 +36,21 @@ .user-windows.is-hovering>.user-windows-mask { box-shadow: inset 0 0 0 2px var(--primary); } + +.user-windows.is-grid[data-size="4"], +.user-windows.is-grid[data-size="5"] { + + .window:nth-child(1), + .window:nth-child(2) { + flex-basis: 45%; + } +} + +.user-windows.is-grid[data-size="6"] { + + .window:nth-child(1), + .window:nth-child(2), + .window:nth-child(3) { + flex-basis: 30%; + } +} diff --git a/packages/flat-pages/src/components/UserWindows.tsx b/packages/flat-pages/src/components/UserWindows.tsx index 905c7195b05..79e2acb9094 100644 --- a/packages/flat-pages/src/components/UserWindows.tsx +++ b/packages/flat-pages/src/components/UserWindows.tsx @@ -95,6 +95,7 @@ export const UserWindows = observer(function UserWindows({ cla "is-grid": isGrid, "is-hovering": hovering, })} + data-size={users.length} > {users.map(({ userUUID, window }) => (