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

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

@@ -3,13 +3,10 @@
 		<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 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>
 
 
-  <div class="add-panel-panels-scroll">
 	<div class="add-panel-panels">
 	<div class="add-panel-panels">
 		<div class="add-panel-item"
 		<div class="add-panel-item"
 				ng-repeat="panel in ctrl.panelHits"
 				ng-repeat="panel in ctrl.panelHits"
@@ -22,6 +19,5 @@
 			<div class="add-panel-item-name">{{panel.name}}</div>
 			<div class="add-panel-item-name">{{panel.name}}</div>
 		</div>
 		</div>
 	</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 {