made groups cover image actually cover the page

less/groups.less

@@ -1,4 +1,6 @@
 [component="groups/container"] {
+	margin-top: 300px;
+
 	[component="groups/summary"] {
 		.panel-body {
 			min-height: 72px;
@@ -45,9 +47,15 @@
 		min-height: 200px;
 		position: relative;
 		margin-bottom: 1em;
+		background-origin: content-box;
+		width: 100%;
+		top: 50px;
+		position: absolute;
+		left: auto;
+		right: 0px;
 
 		@media (min-width: @screen-md-min) {
-			min-height: 250px;
+			min-height: 300px;
 		}
 
 		&.initialised:hover {
@@ -141,6 +149,4 @@
 			}
 		}
 	}
-
-
 }

templates/groups/details.tpl

@@ -1,7 +1,5 @@
-<!-- IMPORT partials/breadcrumbs.tpl -->
-
 <div component="groups/container" class="details row">
-	<div class="col-xs-12" component="groups/cover" style="background-origin: content-box; background-image: url({group.cover:url}); background-position: {group.cover:position};">
+	<div component="groups/cover" style="background-image: url({group.cover:url}); background-position: {group.cover:position};">
 		<div class="controls">
 			<span class="upload"><i class="fa fa-fw fa-4x fa-upload"></i></span>
 			<span class="resize"><i class="fa fa-fw fa-4x fa-arrows-alt"></i></span>
@@ -9,6 +7,11 @@
 		<div class="save">[[groups:cover-save]] <i class="fa fa-fw fa-floppy-o"></i></div>
 		<div class="indicator">[[groups:cover-saving]] <i class="fa fa-fw fa-refresh fa-spin"></i></div>
 	</div>
+
+	<div class="col-xs-12">
+		<!-- IMPORT partials/breadcrumbs.tpl -->
+	</div>
+
 	<div class="col-lg-6 col-xs-12">
 		<div class="panel panel-default">
 			<div class="panel-heading">