Making web application fit fully on screen using React

I am trying to create a responsive layout using React. I found that the Holy Grail layout fits best to my needs and I am trying to make the one found on this fiddle work (It is not mine): Holy Grail fiddle.

I am also using video-react for my video player, video-react.

The layout I get is not fitting on the screen when it's full size, but fits pretty well when it is in mobile view.

This is what I get when it is in full screen: Link to my app

And here is my code:

App.js

render() {
    const { expanded } = this.state;
    return (
        <React.Fragment>

            <nav className="header navbar navbar-light bg-success mb-auto">
                <span className="navbar-brand mb-0 h1" style=>Venoossed</span>
            </nav>


            <div className="holygrail-body">
                {/*KokPlayer*/}
                <div className="content">
                    <KokPlayer currentUrl={this.state.source} playerState={this.state.playerState}/>
                </div>

                <div className="side-navigation">
                    <hr />
                    <div style=>
                        <Sidenav
                            expanded={expanded}
                            defaultOpenKeys={['3', '4']}
                            activeKey={this.state.activeKey}
                            onSelect={this.handleSelect}
                        >
                            <Sidenav.Body className="bg-light">
                                <Toggle onChange={this.handleToggle} checked={expanded}/>
                                <Nav>
                                    {this.sources.map(source =>
                                        <Nav.Item key={source.id} eventKey={source.id} icon={<Icon icon="dashboard"/>}>
                                            {source.name}
                                        </Nav.Item>
                                    )}

                                    <Dropdown eventKey="3" title="Advanced" icon={<Icon icon="magic" />}>
                                        <Dropdown.Item >Geo</Dropdown.Item>
                                        <Dropdown.Item >Devices</Dropdown.Item>
                                        <Dropdown.Item >Loyalty</Dropdown.Item>
                                        <Dropdown.Item >Visit Depth</Dropdown.Item>
                                    </Dropdown>
                                </Nav>
                            </Sidenav.Body>
                        </Sidenav>
                    </div>
                </div>
            </div>

            <nav className="footer navbar navbar-light bg-success mb-auto">
                <div style=>
                    <Button onClick={() => this.changePlayerState('play')} className="mr-3">
                        play()
                    </Button>
                    <Button onClick={() => this.changePlayerState('pause')} className="mr-3">
                        pause()
                    </Button>
                    <Button onClick={() => this.changePlayerState('fs')} className="mr-3">
                        FullScreen()
                    </Button>
                </div>
            </nav>

        </React.Fragment>
    );
}

holygrail.scss

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  text-align: center;
}
body .header {
  width: 100%;
  height: 60px;
  background: pink;
}
body .holygrail-body {
  flex: 1 0 auto;
  display: flex;
}
body .holygrail-body .content {
  flex: 1 0 auto;
  background: lightgreen;
}
body .holygrail-body .side-navigation {
  width: auto;
  list-style: none;
  text-align: left;
  order: -1;
  background: yellow;
  margin: 0;
}
body .holygrail-body .flex-aside {
  width: auto;
  background: orange;
}
body .footer {
  width: 100%;
  height: 60px;
  background: cyan;
}
@media (max-width: 700px) {
  body .holygrail-body {
    flex-direction: column;
  }
  body .holygrail-body .side-navigation, body .holygrail-body .flex-aside {
    width: 100%;
  }
}

My question is, how can I make it fit fully on screen?

from Making web application fit fully on screen using React

Making web application fit fully on screen using React 2019-03-18T06:14:00-07:00 Rating: 4.5 Diposkan Oleh: Admin