sidebar shall not overlap but shrink the contnet

apps/files/css/detailsView.css

@@ -1,14 +1,18 @@
 
 
 .app-files .detailsView.disappear {
-	margin-right: -359px;
+	visibility: hidden;
+}
+
+.with-sidebar {
+	width: 80%;
 }
 
 .app-files .detailsView {
-	position: fixed;
-	width: 350px;
+	position: absolute;
+	width: 20%;
 	top: 44px; /* main header's height */
-	right: 9px;
+	right: 0;
 	left: auto;
 	bottom: 0;
 	background-color: white;
@@ -18,6 +22,7 @@
 	transition: margin-right 300ms;
 	overflow-x: hidden;
 	overflow-y: auto;
+	visibility: visible;
 }
 
 .app-files .detailsView {

apps/files/js/detailsview.js

@@ -80,7 +80,9 @@
 			this._detailFileInfoViews = [];
 
 			this.$el.on('click', 'a.close', function(event) {
-				self.$el.addClass('disappear');
+				self.$el
+					.addClass('disappear')
+					.siblings('.with-sidebar').removeClass('with-sidebar');
 				event.preventDefault();
 			});
 

apps/files/js/filelist.js

@@ -214,7 +214,7 @@
 			if (_.isUndefined(options.detailsViewEnabled) || options.detailsViewEnabled) {
 				this._detailsView = new OCA.Files.DetailsView();
 				this._detailsView.addDetailView(new OCA.Files.MainFileInfoDetailView());
-				this.$el.append(this._detailsView.$el);
+				this._detailsView.$el.insertAfter(this.$el);
 				this._detailsView.$el.addClass('disappear');
 			}
 
@@ -301,6 +301,7 @@
 
 			if (!fileInfo) {
 				this._detailsView.$el.addClass('disappear');
+				this.$el.removeClass('with-sidebar');
 				this._detailsView.setFileInfo(null);
 				return;
 			}
@@ -312,6 +313,7 @@
 			this._detailsView.$el.scrollTop(0);
 			_.defer(function() {
 				self._detailsView.$el.removeClass('disappear hidden');
+				self.$el.addClass('with-sidebar');
 			});
 		},