issue with List.Item to large when rendered with sidenav and container

[jhylton]

What version of rsuite are you using?

5.37.0

What version of React are you using?

18.2.0

What version of TypeScript are you using (if any)?

No response

What browser are you using?

Chrome

Describe the Bug

I am using the rsuite with the following layout:

import '../styles/globals.css'
import '../styles/light.less'
import { useState, useLayoutEffect } from 'react';
import { Provider } from 'react-redux';
import store from '../store';
import { Container, Header, Content } from 'rsuite';
import SideNavigation from '../components/navigation/SideNavigation';
import HeadNavigation from '../components/navigation/HeadNavigation'
import PageLabel from '../components/navigation/PageLabel';
import { SizeMainDiv } from '../helpers/gridHelper';
import { SessionProvider, useSession } from 'next-auth/react'
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps: { session, ...pageProps } }) {
  const [mainSize, setMainSize] = useState(null);

  // useLayoutEffect(() => {
  //   var updateSize = () => { setMainSize(SizeMainDiv()); };
  //   window.addEventListener('resize', updateSize);
  //   updateSize();
  // }, []);

  return (
    <SessionProvider session={session}>
      <Provider store={store}>
        {Component.auth ? (
          <Auth>
            <div className="show-container">
              <Container>
                <Header>
                  <HeadNavigation />
                </Header>
                <Container>
                  <SideNavigation />
                  <Content>
                    <PageLabel />
                    <div
                      style={{
                        paddingLeft: '10px',
                        paddingRight: '10px',
                        paddingTop: '10px',
                        overflow: 'auto',
                        height: mainSize
                      }}
                    >
                      <Component {...pageProps} />
                    </div>
                  </Content>
                </Container>
              </Container>
            </div >
          </Auth>
        ) : (
          <Component {...pageProps} />
        )}
      </Provider>
    </SessionProvider>
  )
}
export default MyApp
const Auth = ({ children }) => {
  const { status } = useSession({ required: true })
  if (status === 'loading') {
    return (
      <div className="k-loading-mask">
        <span className="k-loading-text">Loading</span>
        <div className="k-loading-image"></div>
        <div className="k-loading-color"></div>
      </div>
    )
  };
  return children;
}

when using a page loaded something keeps expanding the height of the list.Item to 136px and I can not seem to override this:

import React from 'react'
import { List } from 'rsuite';
const AppRole = () => {
    return (
        <div>
            <List>
                <List.Item style={{ color: 'black' }}>Roses are red</List.Item>
                <List.Item>Violets are blue</List.Item>
                <List.Item>Sugar is sweet</List.Item>
                <List.Item>And so are you</List.Item>
            </List>
        </div>
    )
}

export default AppRole
AppRole.auth = true;

iam using the stylesheet from one of your examples for the sidemenu:

@import 'rsuite/dist/rsuite.css';

#root {
  padding: 10px;
}

body {
  font-family: -apple-system, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  font-size: 10px;
  line-height: 1.52857;
}

a:link {
  text-decoration: none
}

a:visited {
  text-decoration: none
}

a:hover {
  text-decoration: underline
}

a:active {
  text-decoration: none
}

.k-tabstrip>.k-content>.k-animation-container {
  width: 100%;
}

.show-container > .rs-container {
  height: 100vh;
}
.show-container .rs-content, .show-container .rs-footer, .show-container .rs-sidebar {
  background-color: #fff;
  color: #fff;
  text-align: left;
  text-decoration: none;
  border-color: #e7e7e7;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
}
.show-container .rs-content {
  background-color: #f5f5f5;
}
.show-container .rs-header, .show-container .rs-footer {
  line-height: 56px;
  background-color: #fff;
  border-color: #e7e7e7;
}
.show-container .rs-content {
  line-height: 120px;
  background-color: #f5f5f5;
}
.show-container .rs-sidebar {
  line-height: 120px;
}
.show-container .rs-dropdown {
  font-size: 10px;
}
.show-fake-browser {
  border: 1px solid #e5e5ea;
  box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
  border-radius: 4px;
  background-color: #f7f7fa;
}
.show-fake-browser.sidebar-page .rs-sidebar {
  height: 700px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
}
.show-fake-browser.sidebar-page .rs-sidenav {
  flex: 1 1 auto;
  width: 100%;
}
.show-fake-browser.sidebar-page .rs-sidenav-collapse-in {
  overflow-y: auto;
}
.show-fake-browser.sidebar-page .rs-dro .rs-header {
  padding: 0 20px;
}
.show-fake-browser.sidebar-page .rs-content {
  padding: 20px;
  margin: 20px;
  background-color: #f5f5f5;
}
.show-fake-browser.sidebar-page .nav-toggle {
  border-top: 1px solid #e5e5ea;
}
.show-fake-browser.navbar-page .rs-content {
  padding: 20px;
  margin: 20px;
  height: 500px;
  background-color: #f7f7fa;
}
.show-fake-browser.navbar-page .rs-footer {
  padding: 20px;
}
.show-fake-browser.login-page .rs-content {
  padding: 20px;
  margin: 20px;
  height: 500px;
}
.show-fake-browser.login-page .rs-footer {
  padding: 20px;
}
.show-fake-browser.login-page .rs-panel {
  background: #fff;
  margin-top: 70px;
}
.pageLabel {
  background-color: #fff;
  text-align: left;
  border-color: #e7e7e7;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.12);
}
.rs-sidenav .rs-sidenav-item .rs-dropdown-toggle {
  font-size: 16px; /* Customize the font size */
  font-family: Verdana, Geneva, Tahoma, sans-serif; /* Customize the font family */
}
.k-table-md {
  font-size: 9px !important;
}

please see attached image for what is this looks like

Expected Behavior

i am hoping to get the same look rendered inside the main div that I get on a blank page:

To Reproduce

the files associated give this error

[jhylton]

Funny, after banging my head against the wall for a couple days, I found the issue,

in global.css file:

.show-container .rs-content {
  line-height: 120px;
  background-color: #f5f5f5;
}
.show-container .rs-content {
  /* line-height: 120px; */
  background-color: #f5f5f5;
}

removing the line height fixed the issue. Many thanks for a great framework btw.