fix: panel view now wraps, no scrolling required, fixes #9746

public/app/features/dashboard/row/add_panel.html

@@ -3,25 +3,21 @@
 		<i class="fa fa-remove"></i>
 		<i class="fa fa-remove"></i>
 	</a>
 	</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>
 </div>

public/sass/components/_row.scss

@@ -61,6 +61,7 @@
   margin: 0 $panel-margin $panel-margin*2 $panel-margin;
   margin: 0 $panel-margin $panel-margin*2 $panel-margin;
   padding: $panel-margin*2;
   padding: $panel-margin*2;
   display: flex;
   display: flex;
+  flex-direction: row;
 }
 }
 
 
 .dash-row-dropview-close {
 .dash-row-dropview-close {
@@ -71,19 +72,10 @@
   height: 20px;
   height: 20px;
 }
 }
 
 
-.add-panel-panels-scroll {
-  width: 100%;
-  overflow: auto;
-  -ms-overflow-style: none;
-
-  &::-webkit-scrollbar {
-    display: none
-  }
-}
-
 .add-panel-panels {
 .add-panel-panels {
   display: flex;
   display: flex;
   flex-direction: row;
   flex-direction: row;
+  flex-wrap: wrap;
 }
 }
 
 
 .add-panel-item {
 .add-panel-item {