@eeacms/volto-eea-website-theme 4.3.7 → 4.3.8

package/CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [4.3.8](https://github.com/eea/volto-eea-website-theme/compare/4.3.7...4.3.8) - 9 June 2026
+
+#### :bug: Bug Fixes
+
+- fix: Header images unsized CLS - refs #304010 [dobri1408 - [`7074063`](https://github.com/eea/volto-eea-website-theme/commit/7074063622e187e201d9cb36b2000b29387ec0dd)]
+
 ### [4.3.7](https://github.com/eea/volto-eea-website-theme/compare/4.3.6...4.3.7) - 6 June 2026
 
 #### :bug: Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "4.3.7",
+  "version": "4.3.8",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/customizations/volto/components/theme/Header/Header.jsx

@@ -224,7 +224,13 @@ const EEAHeader = ({ pathname, token, items, history, navroot, subsite }) => {
     <Header menuItems={items}>
       <Header.TopHeader>
         <Header.TopItem className="official-union">
-          <Image src={eeaFlag} alt="European Union flag"></Image>
+          <Image
+            src={eeaFlag}
+            alt="European Union flag"
+            width={34}
+            height={24}
+            style={{ aspectRatio: '34 / 24' }}
+          ></Image>
           <Header.TopDropdownMenu
             text="An official website of the European Union | How do you know?"
             tabletText="EEA information systems"
@@ -314,6 +320,16 @@ const EEAHeader = ({ pathname, token, items, history, navroot, subsite }) => {
                   <Image
                     src={subsite.subsite_logo.scales.mini.download}
                     alt={subsite.title}
+                    width={subsite.subsite_logo.scales.mini.width || 80}
+                    height={subsite.subsite_logo.scales.mini.height || 80}
+                    style={
+                      (subsite.subsite_logo.scales.mini.width || 80) &&
+                      (subsite.subsite_logo.scales.mini.height || 80)
+                        ? {
+                            aspectRatio: `${subsite.subsite_logo.scales.mini.width || 80} / ${subsite.subsite_logo.scales.mini.height || 80}`,
+                          }
+                        : undefined
+                    }
                   />
                 ) : (
                   subsite.title

package/src/customizations/volto/components/theme/Header/Header.test.jsx

@@ -180,6 +180,8 @@ describe('Header', () => {
                   mini: {
                     download:
                       'http://localhost:8080/Plone/subsite_logo/@@images/image/mini',
+                    width: 80,
+                    height: 80,
                   },
                 },
               },

package/src/customizations/volto/components/theme/Header/LanguageSwitcher.jsx

@@ -51,7 +51,15 @@ const LanguageSwitcher = ({ width, history }) => {
       className="item"
       text={`${language.toUpperCase()}`}
       mobileText={`${language.toUpperCase()}`}
-      icon={<Image src={globeIcon} alt="language dropdown globe icon"></Image>}
+      icon={
+        <Image
+          src={globeIcon}
+          alt="language dropdown globe icon"
+          width={24}
+          height={24}
+          style={{ aspectRatio: '24 / 24' }}
+        />
+      }
       viewportWidth={width}
     >
       <ul

package/src/customizations/volto/helpers/Html/Html.jsx

@@ -168,6 +168,7 @@ class Html extends Component {
             criticalCss ? (
               <>
                 <script
+                  nonce={nonce}
                   dangerouslySetInnerHTML={{
                     __html: CRITICAL_CSS_TEMPLATE,
                   }}