chore: refactor to hopefully fix flaky Cypress tests

Author: ghiscoding

src/app/examples/grid-composite-editor.component.html

@@ -1,7 +1,6 @@
 <div id="demo-container" class="container-fluid">
   <h2>
-    {{ title }}
-
+    Example 30: Composite Editor Modal
     <span class="float-end">
       <a
         style="font-size: 18px"
@@ -24,7 +23,14 @@ <h2>
       <span>Toggle Dark Mode</span>
     </button>
   </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></div>
+  <div class="subtitle">
+    Composite Editor allows you to Create, Clone, Edit, Mass Update & Mass Selection Changes inside a nice Modal Window.
+    <br />The modal is simply populated by looping through your column definition list and also uses a lot of the same logic as
+    inline editing (see
+    <a href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/composite-editor-modal" target="_blank"
+      >Composite Editor - Wiki</a
+    >.)
+  </div>
 
   <div class="mb-2">
     <div class="btn-group btn-group-sm" role="group" aria-label="Basic Editing Commands">

src/app/examples/grid-composite-editor.component.ts

@@ -89,10 +89,6 @@ const myCustomTitleValidator = (value: any, args: any) => {
 })
 export class GridCompositeEditorComponent implements OnDestroy, OnInit {
   private _darkMode = false;
-  title = 'Example 30: Composite Editor Modal';
-  subTitle = `Composite Editor allows you to Create, Clone, Edit, Mass Update & Mass Selection Changes inside a nice Modal Window.
-  <br>The modal is simply populated by looping through your column definition list and also uses a lot of the same logic as inline editing (see <a href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/composite-editor-modal" target="_blank">Composite Editor - Wiki</a>.)`;
-
   angularGrid!: AngularGridInstance;
   compositeEditorInstance!: SlickCompositeEditorComponent;
   gridOptions!: GridOption;

src/styles.scss

@@ -190,7 +190,11 @@ section {
   background-color: #fff;
   /* the height is 100% minus the 2 navbars */
   height: calc(100vh - 56px);
-  padding: 0 10px;
+  padding: 0 20px;
+
+  #demo-container {
+    padding-bottom: 15px;
+  }
 
   h3 {
     color: #333;

test/cypress/e2e/example27.cy.ts

@@ -120,7 +120,7 @@ describe('Example 27 - GraphQL Basic API without Pagination', () => {
   });
 
   it('should Clear all Filters and expect all rows to be back', () => {
-    cy.get('#grid27').find('button.slick-grid-menu-button').click();
+    cy.get('#grid27').find('button.slick-grid-menu-button').click({ force: true });
 
     cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item').first().find('span').contains('Clear all Filters').click();
 

test/cypress/e2e/example30.cy.ts

@@ -47,7 +47,7 @@ describe('Example 30  Composite Editor Modal', () => {
 
   it('should display 2 different tooltips when hovering icons on "Title" column', () => {
     cy.get('.slick-column-name').as('title-column');
-    cy.get('@title-column').find('.mdi-alert-outline').trigger('mouseover');
+    cy.get('@title-column').find('.mdi-alert-outline').trigger('mouseover', { force: true });
 
     cy.get('.slick-custom-tooltip').should('be.visible');
     cy.get('.slick-custom-tooltip .tooltip-body').contains('Task must always be followed by a number');