site group, preset group

public/index.html

@@ -36,15 +36,18 @@
 
 				<div class="sites">
 					<div class="title">Sites:</div>
+					<div class="group">
 						<button class="btn btn-sm btn-outline-light" ng-repeat="(key, value) in data.sites" ng-click="setSite(key)" ng-class="{ 'active': site === key }" ng-cloak>
 							{{ getDomain(key) }}<small ng-cloak>({{ getSiteChanges(key) !== undefined ? getSiteChanges(key) : '?' }})</small>
 							<span class="close" ng-if="key > 0" ng-click="removeSite(key)">&times;</span>
 						</button>
 						<button class="btn btn-sm btn-outline-light" ng-click="addSite()">＋ Add site</button>
 					</div>
+				</div>
 
 				<div class="presets">
 					<div class="title">Presets:</div>
+					<div class="group">
 						<button
 							type="button"
 							class="btn btn-sm btn-outline-light"
@@ -119,6 +122,7 @@
 						><span ng-include="'assets/img/brands/magento.svg'"></span> Magento</button>
 					</div>
 				</div>
+			</div>
 		</header>
 		<section class="tabs">
 			<div class="container">

resources/scss/_header.scss

@@ -49,7 +49,7 @@ header {
 	.github {
 		@include media-breakpoint-up(lg) {
 			position: absolute;
-			right: 0;
+			right: 15px;
 			top: 10px;
 		}
 
@@ -106,11 +106,13 @@ header {
 		}
 	}
 
-	.title {
+	.sites .title,
+	.presets .title {
 		color: #eee;
 		font-size: 0.9rem;
+		line-height: 1.9rem;
 		font-style: italic;
-		vertical-align: -5px;
+		vertical-align: top;
 		margin-right: 4px;
 		text-align: center;
 
@@ -120,6 +122,26 @@ header {
 		}
 	}
 
+	.sites .group,
+	.presets .group {
+		@include media-breakpoint-up(lg) {
+			display: inline-block;
+			vertical-align: top;
+		}
+	}
+
+	.sites .group {
+		@include media-breakpoint-up(lg) {
+			width: calc(100% - 290px);
+		}
+	}
+
+	.presets .group {
+		@include media-breakpoint-up(lg) {
+			width: calc(100% - 64px);
+		}
+	}
+
 	.btn-outline-light {
 		box-shadow: none !important;
 		border-color: #999;