gm-scroll-view divs increase their height endlessly when visible.

[sli]

When using the library and the tab is visible, the height CSS rule increases at about 1000 pixels per second, as long as the page is in view. Switching tabs stops this behavior, and the behavior resumes when switching back. This happens for all instance on the page. I've included a screenshot of two instances updating, and the relevant code attached to the event that's doing it.

Update: This appears to be related to using nested MUI grids that each have their own instance of Gemini on them, so this bug may be entirely from this specific use.

[noeldelgado]

Hi @sli, does your MUI grids have a height or max-height properties specified?
If not, does setting a explicit height to your chat-scrollbar elements will work for your design?

[sli]

Applying a height directly to the scrollbar seems to have stopped the problem. It's a less than ideal solution, but I can live with that.

Just to be thorough, I've managed to reproduce it with a fairly minimal grid setup that is not nested. The chatMessageComponents variable is just an array of some standard MUI ListItem components. I can also confirm that removing the GeminiScrollbar component stops the issue (expected, since it's the height of the gm-scrollbar-view div that's exploding). Code is below.

<Drawer
  anchor='right'
  open={open}
  onClose={closeChat}
  classes={{ paper: classes.drawerSizer }}
>
  <Grid container>
    <Grid item xs={12}>
      <div className={classNames(classes.drawerBannerRow, classes.drawerHeader)}>
        Enterprise Chat
      </div>
    </Grid>

    <Grid item xs={9}>
      <GeminiScrollbar className='chat-scrollbar'>
        <List>
          { chatMessageComponents }
        </List>
      </GeminiScrollbar>
    </Grid>
  </Grid>
</Drawer>

These are the relevant styles being applied:

  drawerSizer: {
    width: 325,
    color: theme.palette.text.primary,
    overflow: 'hidden'
  },
  // ...snip...
  drawerHeader: {
    justifyContent: 'center'
  },
  drawerBannerRow: {
    minHeight: 64,
    display: 'flex',
    backgroundColor: theme.uwl.headerBackgroundColor,
    color: theme.palette.text.primary,
    alignItems: 'center',
    boxShadow: '0px 2px 4px -1px rgba(0, 0, 0, 0.2),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 1px 10px 0px rgba(0, 0, 0, 0.12)'
  },
  chatBody: {
    height: '90vh'
  },
  // ...snip...

And this one additional rule from an external stylesheet:

.analytics-scrollbar .gm-scrollbar.-horizontal,
.chat-scrollbar .gm-scrollbar.-horizontal {
  visibility: hidden;
}

The <Grid item> component containing the scrollbar exhibits the bug. Applying the same height to .chat-scrollbar that's used in chatBody seems to fix the bug.

[noeldelgado]

@sli, let me understand better, how do you plan on having vertical scrollbars without setting an explicit height to its container?