Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow for a 3x2 grid layout for the GridLayout component #886

Open
vandercloak opened this issue Jun 5, 2024 · 4 comments
Open

Allow for a 3x2 grid layout for the GridLayout component #886

vandercloak opened this issue Jun 5, 2024 · 4 comments

Comments

@vandercloak
Copy link

vandercloak commented Jun 5, 2024

Describe the problem

4-6 participants is our use cases sweat spot. At the moment when there are 5-6 participants, it uses a 3x3 grid layout.

Is it possible to allow for a 3x2 grid layout (or allow us to override the GRID_LAYOUTS variable)?

image

Describe the proposed solution

Allow for the customizing/overwritting of the layouts OR to add this entry to GRID_LAYOUTS

{
    columns: 3,
    rows: 2,
    name: "3x2",
    minTiles: 5,
    maxTiles: 6,
    minWidth: 700,
    minHeight: 0
},

### Alternatives considered

_No response_

### Importance

I cannot use LiveKit without it

### Additional Information

_No response_
@Ocupe
Copy link
Contributor

Ocupe commented Jun 5, 2024

Hi @vandercloak, I agree with you, which is why we changed this a while ago. Are you on the latest version? We added a pure CSS solution fd776c3. You can get the desired behaviour by changing one line. Let us know if this works for you?

@vandercloak
Copy link
Author

This is great news. I will try it out today. Thanks @Ocupe for getting back to me so quick!

@vandercloak
Copy link
Author

@Ocupe Is there any fix for this for the react version of live kit?

"@livekit/components-core": "^0.10.2",
"@livekit/components-react": "2.3.2",
"@livekit/components-styles": "1.0.12",
"livekit-client": "2.2.0",

@Ocupe
Copy link
Contributor

Ocupe commented Jun 7, 2024

It should work when you update the @livekit/components-styles package. You can see it in action in the Meet application. Make sure your grid has the correct CSS properties applied to it (like here).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants