chore(angular): small Angular demo UI fixes

Author: ghiscoding

frameworks/angular-slickgrid/src/demos/examples/example21.component.scss

@@ -1,16 +1,16 @@
 // sort indication will show behind Grid Menu since we don't have scroll,
 // we can offset these icons to fix that
-#grid23 {
-    .slick-header-column:last-child {
-        .slick-header-menu-button,
-        .slick-resizable-handle,
-        .slick-sort-indicator,
-        .slick-sort-indicator-numbered {
-            margin-right: 18px; // grid menu icon width
-        }
+#grid21 {
+  .slick-header-column:last-child {
+    .slick-header-menu-button,
+    .slick-resizable-handle,
+    .slick-sort-indicator,
+    .slick-sort-indicator-numbered {
+      margin-right: 18px; // grid menu icon width
     }
+  }
 }
 
 .duration-bg {
-    background-color: #e9d4f1 !important;
-}
+  background-color: #e9d4f1 !important;
+}

frameworks/angular-slickgrid/src/demos/examples/example26.component.scss

@@ -18,6 +18,11 @@ h3 {
   }
 }
 
+.slick-headerrow-column ng-component,
+.ng-select {
+  width: 100%;
+}
+
 .ng-select-focused {
   box-shadow: 0 0 0 0.25rem #0d6efd40;
 }
@@ -39,4 +44,4 @@ h3 {
   .mdi-chevron-down {
     margin-left: 5px;
   }
-}
+}

frameworks/angular-slickgrid/src/demos/examples/example27.component.scss

@@ -1,7 +1,7 @@
 /* make sure to add the @use the SlickGrid Theme AFTER the variables changes */
 // @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.lite.scss';
 
-#grid28 {
+#grid27 {
   .slick-cell {
     display: inline-flex;
     align-items: center;

frameworks/angular-slickgrid/src/demos/examples/example28.component.scss

@@ -1,6 +1,6 @@
 // @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
 
-#grid29 {
+#grid28 {
   .slick-cell {
     display: inline-flex;
     align-items: center;
@@ -25,7 +25,8 @@
     opacity: 0.9;
   }
 
-  .mdi-folder, .mdi-folder-open {
+  .mdi-folder,
+  .mdi-folder-open {
     color: #ffa500;
     opacity: 0.9;
   }
@@ -34,7 +35,7 @@
     opacity: 0.9;
   }
   .mdi-file-excel-outline {
-    color: #1E9F75;
+    color: #1e9f75;
     opacity: 0.9;
   }
   .mdi-file-document-outline,
@@ -50,5 +51,7 @@
 
 // create a few 15px indentation multiplied by level number
 @for $i from 1 through 6 {
-  .width-#{$i*15}px { width: #{$i * 15}px; }
+  .width-#{$i*15}px {
+    width: #{$i * 15}px;
+  }
 }