resolve #9428 Advanced header: add gap between rows and columns

Author: OlgaLarina

packages/survey-core/src/default-theme/blocks/header.scss

@@ -60,11 +60,11 @@
   height: 100%;
   position: relative;
   display: grid;
-  gap: 0;
   // grid-auto-rows: min-content;
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: 1fr 1fr 1fr;
-  // row-gap: calcSize(1);
+  row-gap: var(--lbr-cover-row-gap, var(--lbr-spacing-x150, calcSize(1.5)));
+  column-gap: var(--lbr-cover-column-gap, var(--lbr-spacing-x6, calcSize(6)));
 }
 
 .sv-header--height-auto {

packages/survey-core/src/header.ts

@@ -303,7 +303,8 @@ export class Cover extends Base {
         const headerComputedStyle = DomDocumentHelper.getComputedStyle(headerEl);
         const paddingLeft = (parseFloat(headerComputedStyle.paddingLeft) || 0);
         const paddingRight = (parseFloat(headerComputedStyle.paddingRight) || 0);
-        this.width = elWidth - paddingLeft - paddingRight;
+        const columnGap = (parseFloat(headerComputedStyle.columnGap) || 0);
+        this.width = elWidth - paddingLeft - paddingRight - 2 * columnGap;
       }
     }
   }