fix(pivot): samples styles

Author: desig9stein

src/app/pivot-grid-hierarchy/pivot-grid-hierarchy.sample.html

@@ -1,9 +1,11 @@
-<div class="sample-column">
+<div class="sample-flex-row">
     <span>Dimensions:</span>
+
     <igx-combo #combo class="combo" [itemsMaxHeight]="250" (selectionChanging)="handleChange($event)"
         [data]="dimensions" [displayKey]="'memberName'" [(ngModel)]="selected"
         placeholder="Dimension(s)" searchPlaceholder="Search...">
     </igx-combo>
-    <igx-pivot-grid #grid1 [data]="origData" [pivotConfiguration]="pivotConfigHierarchy" (dimensionsChange)='dimensionChange($event)' [defaultExpandState]='true'>
-    </igx-pivot-grid>
-</div>
+</div>
+<igx-pivot-grid #grid1 [data]="origData" [pivotConfiguration]="pivotConfigHierarchy" (dimensionsChange)='dimensionChange($event)' [defaultExpandState]='true'>
+</igx-pivot-grid>
+

src/app/pivot-grid-hierarchy/pivot-grid-hierarchy.sample.scss

@@ -1,23 +1,45 @@
 :host {
-    display: block;
+    display: flex;
+    flex-direction: column;
     height: 100%;
 }
 
+.sample-flex-row {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    margin-bottom: 16px;
+
+    span {
+        margin-bottom: 8px;
+    }
+
+    igx-combo {
+        min-width: 400px;
+    }
+}
+
+igx-pivot-grid {
+    flex: 1;
+}
+
+
 :host ::ng-deep {
     .upFont {
         color: green;
     }
 
     .downFont {
-        color:red;
+        color: red;
     }
 
     .upFont1 {
         color: blue;
     }
 
     .downFont1 {
-        color:yellow;
+        color: yellow;
     }
 
     .sample-column {

src/app/pivot-grid/pivot-grid.sample.html

@@ -1,5 +1,4 @@
 <div class="sample-flex-row">
-    <div>
     <igx-combo #combo class="combo" [itemsMaxHeight]="250" (selectionChanging)="handleChange($event)"
                [data]="dimensions" [displayKey]="'memberName'" [(ngModel)]="selected"
                placeholder="Dimension(s)" searchPlaceholder="Search...">
@@ -11,9 +10,10 @@
             <button igxButton [disabled]="grid1.displayDensity === compact" (click)="setDensity('compact')">Compact</button>
         </igx-buttongroup>
     </div>
-    <igx-pivot-grid #grid1 [data]="origData" [width]="'100%'" [height]="'100%'" [defaultExpandState]='true'
-        [pivotConfiguration]="pivotConfigHierarchy" (dimensionsChange)='dimensionChange($event)'>
-    </igx-pivot-grid>
-</div>
 </div>
 
+<igx-pivot-grid #grid1 [data]="origData" [width]="'100%'" [height]="'100%'" [defaultExpandState]='true'
+    [pivotConfiguration]="pivotConfigHierarchy" (dimensionsChange)='dimensionChange($event)'>
+</igx-pivot-grid>
+
+

src/app/pivot-grid/pivot-grid.sample.scss

@@ -5,7 +5,9 @@
 }
 
 .density-chooser {
-    max-width: 40%;
+    max-width: 60%;
+    min-width: 400px;
+
 }
 
 igx-pivot-grid {
@@ -15,9 +17,13 @@ igx-pivot-grid {
 .sample-flex-row {
     align-items: center;
     display: flex;
+    flex-wrap: wrap;
     gap: 16px;
     margin-bottom: 16px;
-    flex-direction: column;
+
+    igx-combo {
+        min-width: 400px;
+    }
 }
 
 :host ::ng-deep {