Semantic-UI Popups issue

by Victor

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.12.0/css/semantic.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.12.0/javascript/semantic.js"></script>
<div class="ui page  wrap">
    <div class="sidebar">
        here is the list stuff
    </div>
    <div class="main-content">
        this is the content area
    </div>
</div>

CSS

body {
    padding: 0;
    margin: 0;
}
.wrap {
    width: 100%;
    background:blue;
    padding: 0;
    margin: 0;
}
.sidebar {
    width: 85px;
    position:absolute;
    top: 0;
    left: 0;
    background:black;
    height: 100%;
}

.main-content {
    width: 100%;
    padding-left: 85px;
    background:white;
}
@media screen and (max-width:787px) {
    .main-content {
    padding-left: 0px;
    background:white;
}
    .sidebar {
        width: 100%;
        position:relative;
        padding: 10px;
}
}