Maximize is too large - to entire height of Grid Component

[SEAjamieD]

Hi @drcmda - Thanks so much for all your work on this. It looks really awesome. I'm trying to get this running on a website so that I can use it as a gallery. I've dropped your simple demo from https://codesandbox.io/embed/z6ly40071p into my project and haven't altered anything yet.

The issue I'm having is that when the cell is maximized, it opens to 100% width and height of the entire Grid component. This ends up placing the contents of the maximized cell far off the screen.

In each of your demos, it appears that the cell is only opening to 100vh - which is what I would like.

To sum it up: My Issue: maximize is opening far taller than what is visible on the screen My Goal: Maximize opens cell/content to 100vh and 100vw

Any Ideas?

Thank you in advance for any guidance you might have.

Thank you for your time.

[drcmda]

Could you make a sandbox to demonstrate this behaviour? PRs also welcome, the grid is just a small-ish class easy to manipulate.

[SEAjamieD]

I was able to recreate here: https://codesandbox.io/s/w29o7r7zol

I'll have a deeper look at it and see what I can come up with or if a PR is necessary. Since this is working properly in your demos, I may be overlooking something.

[drcmda]

I added these two classes:

.App {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr;
}

.grid {
  height: unset !important;
}

The first one makes sure the grid gets an actual chunk of the screen because it's suppose to scroll inside the grid container, not outside (the would involve some more complex changes). The second i chalk up to css being weird or i don't know enough about it, but works ...

https://codesandbox.io/embed/7zv7qzowo6

[SEAjamieD]

Thanks @drcmda - Interestingly enough, just setting the .grid class to any height desired with !important solves the largest issue for me.

I'd like to take a stab at altering to the way I like - I didn't see a start script in your package.json. How do i run it?

Thanks Again! I'll close this out after, as I think this addresses the lions share of my issue.

[drcmda]

There’s none atm, I just copy the component out to test and evolve it for now.