From 4366d2f28181ec2ea5a74d52b9b9f4a0bfe91903 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 1 Nov 2017 11:10:43 +0100
Subject: [PATCH] fix: panel view now wraps, no scrolling required, fixes #9746

(cherry picked from commit 894951c7d4ea43c0d12baec026d93d71f7f99d34)
---
 .../app/features/dashboard/row/add_panel.html | 34 ++++++++-----------
 public/sass/components/_row.scss              | 12 ++-----
 2 files changed, 17 insertions(+), 29 deletions(-)

diff --git a/public/app/features/dashboard/row/add_panel.html b/public/app/features/dashboard/row/add_panel.html
index 5a4ecc118cd..f68b3549be6 100644
--- a/public/app/features/dashboard/row/add_panel.html
+++ b/public/app/features/dashboard/row/add_panel.html
@@ -3,25 +3,21 @@
 		<i class="fa fa-remove"></i>
 	</a>
 
-  <div class="gf-form-inline dash-row-add-panel-form">
-    <div class="gf-form">
-      <input type="text" class="gf-form-input max-width-14" ng-model='ctrl.panelSearch' give-focus='true' ng-keydown="ctrl.keyDown($event)" ng-change="ctrl.panelSearchChanged()" placeholder="panel search filter"></input>
-    </div>
-  </div>
+	<div class="gf-form width-10">
+		<input type="text" class="gf-form-input width-10" ng-model='ctrl.panelSearch' give-focus='true' ng-keydown="ctrl.keyDown($event)" ng-change="ctrl.panelSearchChanged()" placeholder="panel search filter"></input>
+	</div>
 
-  <div class="add-panel-panels-scroll">
-    <div class="add-panel-panels">
-      <div class="add-panel-item"
-					ng-repeat="panel in ctrl.panelHits"
-					ng-class="{active: $index === ctrl.activeIndex}"
-					ng-click="ctrl.addPanel(panel)"
-					ui-draggable="true"
-					drag="panel.id"
-          title="{{panel.name}}">
-        <img class="add-panel-item-img" ng-src="{{panel.info.logos.small}}"></img>
-        <div class="add-panel-item-name">{{panel.name}}</div>
-      </div>
-    </div>
-  </div>
+	<div class="add-panel-panels">
+		<div class="add-panel-item"
+				ng-repeat="panel in ctrl.panelHits"
+				ng-class="{active: $index === ctrl.activeIndex}"
+				ng-click="ctrl.addPanel(panel)"
+				ui-draggable="true"
+				drag="panel.id"
+				title="{{panel.name}}">
+			<img class="add-panel-item-img" ng-src="{{panel.info.logos.small}}"></img>
+			<div class="add-panel-item-name">{{panel.name}}</div>
+		</div>
+	</div>
 
 </div>
diff --git a/public/sass/components/_row.scss b/public/sass/components/_row.scss
index 840db839607..0cdc3428f3e 100644
--- a/public/sass/components/_row.scss
+++ b/public/sass/components/_row.scss
@@ -61,6 +61,7 @@
   margin: 0 $panel-margin $panel-margin*2 $panel-margin;
   padding: $panel-margin*2;
   display: flex;
+  flex-direction: row;
 }
 
 .dash-row-dropview-close {
@@ -71,19 +72,10 @@
   height: 20px;
 }
 
-.add-panel-panels-scroll {
-  width: 100%;
-  overflow: auto;
-  -ms-overflow-style: none;
-
-  &::-webkit-scrollbar {
-    display: none
-  }
-}
-
 .add-panel-panels {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
 }
 
 .add-panel-item {