Index: resources/assets/sass/components/webapp.scss
===================================================================
--- resources/assets/sass/components/webapp.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
+++ resources/assets/sass/components/webapp.scss	(revision 7304c7f4e9d471fa8974c193daec4fdd86dabe58)
@@ -0,0 +1,232 @@
+.stretch-layout {
+    overflow: hidden;
+
+    .app-block {
+        height: calc(100vh - #{$header-height + 30px + 30px});
+    }
+
+    .content-footer {
+        display: none;
+    }
+
+    &:not(.chat-app).right-navigation {
+        &.small-navigation {
+            .layout-wrapper .content-wrapper .content-body .content {
+                padding-left: 30px !important;
+                padding-right: $navigation-tab-width + 30px !important;
+            }
+        }
+    }
+
+    &.hidden-navigation {
+        .layout-wrapper .content-wrapper .content-body .content {
+            padding-right: 30px !important;
+            padding-left: 30px !important;
+        }
+    }
+}
+
+.stretch-layout {
+    &.horizontal-navigation {
+        .app-block {
+            height: calc(100vh - #{$header-height + 30px + 30px + $header-height - 20px});
+        }
+    }
+}
+
+.app-block {
+    .app-sidebar {
+        height: 100%;
+
+        & > .card {
+            height: 100%;
+            margin-bottom: 0;
+
+            .card-body {
+                flex: none;
+            }
+        }
+
+        .app-sidebar-menu {
+            flex: 1;
+
+            .list-group {
+                .list-group-item.active {
+                    background: none;
+                    color: $color-primary;
+                }
+            }
+        }
+    }
+
+    .app-sidebar-menu-button {
+        display: none;
+    }
+
+    .app-content {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+
+        .app-content-overlay {
+            display: none;
+            position: absolute;
+            right: 1rem;
+            border-radius: 8px;
+            left: 1rem;
+            top: 0;
+            bottom: 0;
+            background-color: rgba(0, 0, 0, 0.25);
+            z-index: 8;
+
+            &.show {
+                display: block;
+            }
+        }
+
+        .app-action {
+            display: flex;
+            justify-content: space-between;
+            @extend .card;
+            padding: 1.5rem;
+
+            .action-left, .action-right {
+                display: flex;
+                align-items: center;
+            }
+
+            .action-right {
+                margin-left: 1rem;
+                flex: 1;
+                display: flex;
+                justify-content: space-between;
+
+                form {
+                    flex: 1;
+                }
+            }
+        }
+
+        .app-content-body {
+            margin-bottom: 0;
+            flex: 1;
+            padding: 0;
+            height: 100%;
+            position: static;
+            overflow: hidden;
+
+            .app-lists {
+                height: 100%;
+                overflow: auto;
+
+
+                ul.list-group {
+                    li.list-group-item {
+                        padding-top: 15px;
+                        padding-bottom: 15px;
+                        background: none;
+                        display: flex;
+                        align-items: center;
+
+                        &:hover {
+                            cursor: pointer;
+                            background-color: #fafafa;
+                        }
+
+                        &.active {
+                            background-color: #ebebeb;
+
+                            .avatar {
+                                border-color: #ebebeb
+                            }
+
+                            .app-list-title {
+                                color: black;
+                            }
+
+                            &.task-list {
+                                .app-list-title {
+                                    text-decoration: line-through;
+                                    @extend .text-success
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            .app-detail {
+                margin-bottom: 0;
+                position: absolute;
+                right: .90rem;
+                top: .50rem;
+                bottom: 0;
+                left: .90rem;
+                z-index: 2;
+                opacity: 0;
+                visibility: hidden;
+                transition: all .3s;
+
+                &.show {
+                    opacity: 1;
+                    visibility: visible;
+                    top: 0;
+                }
+
+                .card-header {
+                    display: flex;
+                    align-items: center;
+                    padding: 1.5rem;
+                    border-bottom: $border-style;
+
+                    .app-detail-action-left {
+                        display: flex;
+                    }
+
+                    .app-detail-action-right {
+                        margin-left: auto;
+                    }
+                }
+            }
+        }
+    }
+}
+
+#compose, .app-block {
+    .ql-toolbar.ql-snow {
+        border: none;
+        padding: 0;
+    }
+
+    .ql-editor {
+        min-height: 70px;
+    }
+}
+
+.app-sortable-handle {
+    cursor: move;
+}
+
+.app-file-list {
+    border: $border-style;
+
+    .app-file-icon {
+        background-color: #f5f5f5;
+        padding: 2rem;
+        text-align: center;
+        font-size: 2rem;
+        border-bottom: $border-style;
+        border-top-right-radius: 8px;
+        border-top-left-radius: 8px;
+    }
+
+    &:hover {
+        border-color: #d7d7d7;
+    }
+}
+
+body:not(.stretch-layout) {
+    .app-block .app-content .app-content-body {
+        overflow: visible;
+    }
+}
