diff --git a/src/api/print.api.js b/src/api/print.api.js
index 36c56e86d4..39d18c213a 100644
--- a/src/api/print.api.js
+++ b/src/api/print.api.js
@@ -135,8 +135,8 @@ class GeoAdminCustomizer extends BaseCustomizer {
                       this.printResolution
                   )
                 : 0
-            // don't ask why it works, but that's the best I could do.
-            symbolizer.graphicYOffset = Math.round(1000 * symbolizer.graphicYOffset ?? 0) / 1000
+            // if there is no graphicYOffset, we can't print points
+            symbolizer.graphicYOffset = Math.round(1000 * (symbolizer.graphicYOffset ?? 0)) / 1000
         }
         if (size) {
             symbolizer.graphicWidth = adjustWidth(size[0] * scale, this.printResolution)
diff --git a/src/modules/menu/components/activeLayers/MenuActiveLayersList.vue b/src/modules/menu/components/activeLayers/MenuActiveLayersList.vue
index fdae21e510..45f4f6d56f 100644
--- a/src/modules/menu/components/activeLayers/MenuActiveLayersList.vue
+++ b/src/modules/menu/components/activeLayers/MenuActiveLayersList.vue
@@ -23,10 +23,9 @@ const { compact } = toRefs(props)
 const activeLayersList = ref(null)
 // used to deactivate the hover change of color on layer whenever one of them is dragged
 const aLayerIsDragged = ref(false)
-const showLayerDescriptionForLayer = ref(null)
 const showLayerDetailIndex = ref(null)
 const layerDetailFocusMoveButton = ref(null)
-
+const showDescriptionForLayerId = ref(null)
 const store = useStore()
 // Users are used to have layers ordered top to bottom (the first layer is on top), but we store them in the opposite order.
 // So here we swap the order of this array to match the desired order on the UI
@@ -96,15 +95,16 @@ function onToggleLayerDetail(index) {
                 :class="{ 'drag-in-progress': aLayerIsDragged }"
                 :show-layer-detail="showLayerDetailIndex === reverseIndex(index)"
                 :focus-move-button="layerDetailFocusMoveButton"
-                @show-layer-description-popup="showLayerDescriptionForLayer = layer"
+                @show-layer-description-popup="showDescriptionForLayerId = layer.id"
                 @toggle-layer-detail="onToggleLayerDetail"
                 @move-layer="onMoveLayer"
-            />
-            <LayerDescriptionPopup
-                v-if="showLayerDescriptionForLayer"
-                :layer="showLayerDescriptionForLayer"
-                @close="showLayerDescriptionForLayer = null"
-            />
+            >
+                <LayerDescriptionPopup
+                    v-if="showDescriptionForLayerId === layer.id"
+                    :layer="layer"
+                    @close="showDescriptionForLayerId = null"
+                />
+            </MenuActiveLayersListItem>
         </div>
         <div v-show="activeLayers.length === 0" class="p-1 ps-3" data-cy="menu-section-no-layers">
             -
diff --git a/src/modules/menu/components/activeLayers/MenuActiveLayersListItem.vue b/src/modules/menu/components/activeLayers/MenuActiveLayersListItem.vue
index 3c294cb5d0..bfe097d30c 100644
--- a/src/modules/menu/components/activeLayers/MenuActiveLayersListItem.vue
+++ b/src/modules/menu/components/activeLayers/MenuActiveLayersListItem.vue
@@ -171,6 +171,7 @@ function changeStyle(newStyle) {
     <div
         ref="menuLayerItem"
         class="menu-layer-item"
+        v-bind="$attrs"
         :class="{ compact: compact }"
         :data-cy="`menu-active-layer-${id}-${index}`"
     >
@@ -345,6 +346,7 @@ function changeStyle(newStyle) {
             </div>
         </div>
     </div>
+    <slot />
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/modules/menu/components/advancedTools/ImportCatalogue/external-providers.json b/src/modules/menu/components/advancedTools/ImportCatalogue/external-providers.json
index 5d89af2fc0..f5cf205f80 100644
--- a/src/modules/menu/components/advancedTools/ImportCatalogue/external-providers.json
+++ b/src/modules/menu/components/advancedTools/ImportCatalogue/external-providers.json
@@ -345,5 +345,20 @@
     "https://www.geoservice.apps.be.ch/geoservice3/services/a42geo/of_transportation01_de_ms_wms/MapServer/WMSServer",
     "https://www.geoservice.apps.be.ch/geoservice3/services/a42geo/of_transportation02_de_ms_wms/MapServer/WMSServer",
     "https://www.ogd.stadt-zuerich.ch/mapproxy/wmts/1.0.0/WMTSCapabilities.xml",
-    "https://www.opensnowmap.org/OSnM_GetCapabilities.xml"
+    "https://www.opensnowmap.org/OSnM_GetCapabilities.xml",
+    "https://geodienste.ch/db/gewaesserraum/deu",
+    "https://geodienste.ch/db/gewaesserraum/fra",
+    "https://geodienste.ch/db/gewaesserraum/ita",
+    "https://geodienste.ch/db/inventar_wasserentnahmen/deu",
+    "https://geodienste.ch/db/inventar_wasserentnahmen/fra",
+    "https://geodienste.ch/db/inventar_wasserentnahmen/ita",
+    "https://geodienste.ch/db/revitalisierung_fliessgewaesser/deu",
+    "https://geodienste.ch/db/revitalisierung_fliessgewaesser/fra",
+    "https://geodienste.ch/db/revitalisierung_fliessgewaesser/ita",
+    "https://geodienste.ch/db/grundwasservorkommen/deu",
+    "https://geodienste.ch/db/grundwasservorkommen/fra",
+    "https://geodienste.ch/db/grundwasservorkommen/ita",
+    "https://geodienste.ch/db/rodungen_und_rodungsersatz/deu",
+    "https://geodienste.ch/db/rodungen_und_rodungsersatz/ita",
+    "https://geodienste.ch/db/rodungen_und_rodungsersatz/fra"
 ]
\ No newline at end of file
diff --git a/src/store/modules/features.store.js b/src/store/modules/features.store.js
index 9234a88068..dd403f191c 100644
--- a/src/store/modules/features.store.js
+++ b/src/store/modules/features.store.js
@@ -684,7 +684,7 @@ export default {
                             lang: rootState.i18n.lang,
                             screenWidth: rootState.ui.width,
                             screenHeight: rootState.ui.height,
-                            mapExtent: flattenExtent(rootState.getters.mapExtent),
+                            mapExtent: flattenExtent(getters.extent),
                             coordinate: rootState.map.clickInfo?.coordinate,
                         })
                     )
diff --git a/src/store/modules/layers.store.js b/src/store/modules/layers.store.js
index 43750d88f7..bc3ce1a03b 100644
--- a/src/store/modules/layers.store.js
+++ b/src/store/modules/layers.store.js
@@ -174,8 +174,9 @@ const getters = {
      *
      * @returns {number}
      */
-    getIndexOfActiveLayerById: (state) => (layerId) =>
-        state.activeLayers.findIndex((layer) => layer.id === layerId),
+    getIndexOfActiveLayerById: (state) => (layerId) => {
+        return state.activeLayers.findIndex((layer) => layer.id === layerId)
+    },
 
     /**
      * All layers in the config that have the flag `background` to `true` (that can be shown as a
diff --git a/src/utils/components/SimpleWindow.vue b/src/utils/components/SimpleWindow.vue
index daf199bfb9..757ef9327d 100644
--- a/src/utils/components/SimpleWindow.vue
+++ b/src/utils/components/SimpleWindow.vue
@@ -44,7 +44,7 @@ const props = defineProps({
     },
     dataCy: {
         type: String,
-        default: '',
+        default: 'simple-window',
     },
 })
 const { title, hide } = toRefs(props)
@@ -104,9 +104,9 @@ onMounted(() => {
                 class="card-header d-flex align-items-center justify-content-sm-end"
                 data-cy="window-header"
             >
-                <span v-if="title" data-cy="simple-window-title" class="me-auto text-truncate">{{
-                    i18n.t(title)
-                }}</span>
+                <span v-if="title" data-cy="simple-window-title" class="me-auto text-truncate">
+                    {{ i18n.t(title) }}</span
+                >
                 <span v-else class="me-auto" />
                 <PrintButton v-if="allowPrint && showBody" :content="contentRef"></PrintButton>
                 <button
diff --git a/tests/cypress/fixtures/html-popup-german.fixture.html b/tests/cypress/fixtures/html-popup-german.fixture.html
new file mode 100644
index 0000000000..fc11e16bcb
--- /dev/null
+++ b/tests/cypress/fixtures/html-popup-german.fixture.html
@@ -0,0 +1,44 @@
+<div class="chbabskulturgueter htmlpopup-container">
+    <div class="htmlpopup-header">
+        <span
+            >Ich bin ein Testfenster</span
+        >
+        (Ich bin ein Testfenster)
+    </div>
+    <div class="htmlpopup-content">
+        <table>
+            <tr>
+                <td class="cell-left">Beschreibung</td>
+                <td>Ich bin ein Testfenster</td>
+            </tr>
+            <tr>
+                <td class="cell-left">Y-Coordinate</td>
+                <td>Ich bin ein Testfenster</td>
+            </tr>
+            <tr>
+                <td class="cell-left">X-Coordinate</td>
+                <td>Ich bin ein Testfenster</td>
+            </tr>
+            <tr>
+                <td class="cell-left">Stadt</td>
+                <td>Ich bin ein Testfenster</td>
+            </tr>
+            <tr>
+                <td class="cell-left">Kanton</td>
+                <td>Ich bin ein Testfenster</td>
+            </tr>
+            <tr>
+                <td class="cell-left"></td>
+                <td>
+                    <a data-cy="more-info-link" href="https://api3.geo.admin.ch/rest/services/ech/MapServer/ch.bav.haltestellen-oev/8577026/extendedHtmlPopup">
+                        Mehr Informationen
+                    </a>
+                </td>
+            </tr>
+            <tr>
+                <td class="cell-left"></td>
+                <td><a href="#">Link zum Object</a></td>
+            </tr>
+        </table>
+    </div>
+</div>
diff --git a/tests/cypress/fixtures/legend.fixture.html b/tests/cypress/fixtures/legend.fixture.html
new file mode 100644
index 0000000000..78dfb16ab9
--- /dev/null
+++ b/tests/cypress/fixtures/legend.fixture.html
@@ -0,0 +1,46 @@
+<div data-v-3ad09ea2="" class="card-body"><div class="layer-description" data-cy="layer-description-popup"><!-- eslint-disable vue/no-v-html--><div data-cy="layer-description">
+<div class="legend-container">
+<div class="legend-header">
+  <p class="bod-title"><span>Fermetures / Déviations Chemins de randonnée et "La Suisse à pied"</span> (Office fédéral des routes OFROU, cantons)</p>
+  <p class="legend-abstract">Le jeu de données contient les fermetures et les déviations sur le réseau de chemins de randonnée et sur les itinéraires de «La Suisse à pied» de la Suisse et de la Principauté du Liechtenstein, qui ont été communiquées à Suisse Rando et leurs Associations cantonales de tourisme pédestre. Il complète les géodonnées «Chemins de randonnée pédestre» (swissTLM3D Chemins de randonnée pédestre) et «La Suisse à pied» (Mobilité douce – La Suisse à pied), et il est publié par l'Office fédéral des routes OFROU, l'Office fédéral de topographie swisstopo, Suisse Rando, SuisseMobile et les cantons.Lien vers le disclaimer: https://schweizmobil.ch/fr/fermetures-deviations</p>
+</div>
+<div class="legend-footer">
+  <br>
+  <span>Légende</span><br>
+  <div class="img-container">
+    <img src="//sys-api3.dev.bgdi.ch/static/images/legends/ch.astra.wanderland-sperrungen_umleitungen_fr.png" alt="layer legend img">
+  </div>
+  <br><br>
+  <span>Informations</span><br>
+  <table>
+    <tbody><tr><td>ID Géodonnées de base</td> <td>-</td></tr>
+    <tr><td>Plage de validité des données</td> <td></td></tr>
+    <tr><td>Métadonnées</td>
+      <td><a target="_blank" href="https://www.geocat.ch/geonetwork/srv/fre/catalog.search#/metadata/b440815a-07e5-48db-959d-cb2ca4458f3a">
+      Lien vers geocat.ch</a></td>
+    </tr>
+    <tr>
+      <td>Description détaillée</td>
+      <td><a href="https://www.schweizmobil.org" target="new">Lien vers la description détaillée des données</a></td>
+    </tr>
+    <tr>
+      <td>Distribution des données</td>
+      <td><a href="https://data.geo.admin.ch/ch.astra.wanderland-sperrungen_umleitungen" target="new">Lien vers la distribution des données</a></td>
+    </tr>
+    <tr>
+      <td>Géoportail thématique</td>
+      <td><a href="https://map.geo.admin.ch/?topic=astra&amp;lang=de&amp;bgLayer=ch.swisstopo.pixelkarte-grau&amp;layers=ch.astra.wanderland-sperrungen_umleitungen&amp;layers_opacity=0.8&amp;catalogNodes=3019" target="new">Lien vers le portail</a></td>
+    </tr>
+    <tr>
+      <td>Service WMS</td>
+      <td><a href="https://wms.geo.admin.ch/?REQUEST=GetCapabilities&amp;SERVICE=WMS&amp;VERSION=1.3.0" target="new">Lien vers le wms</a></td>
+    </tr>
+    <tr>
+      <td>État d'actualité</td>
+      <td>02.12.2024</td>
+    </tr>
+  </tbody></table>
+</div>
+</div>
+</div>
+</div></div>
\ No newline at end of file
diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js
index f234197699..1a33f72d8a 100644
--- a/tests/cypress/support/commands.js
+++ b/tests/cypress/support/commands.js
@@ -485,6 +485,59 @@ Cypress.Commands.add('waitMapIsReady', ({ timeout = 20000, olMap = true } = {})
     }
 })
 
+/**
+ * Click on the map at the given coordinates
+ *
+ * @param {string} selector The selector of the element
+ * @param {Number} x X coordinate
+ * @param {Number} y Y coordinate
+ * @param {Number} button Mouse button to use
+ * @see https://docs.cypress.io/api/commands/trigger#Trigger-a-mousedown-from-a-specific-mouse-button
+ */
+Cypress.Commands.add('dragMouse', (selector, x, y, button = 0) => {
+    cy.get(selector).trigger('mousedown', { button })
+    cy.get(selector).trigger('mousemove', { button, clientX: 0, clientY: 0 }) // this is needed to make the drag work
+    cy.get(selector).trigger('mousemove', { button, clientX: x, clientY: y })
+    cy.get(selector).trigger('mouseup', { button })
+})
+
+/**
+ * Resize an element by dragging the bottom right corner If using the startXY coordinates, the
+ * startPosition should be undefined and the same for endXY X and Y coordinates are relative to the
+ * top left corner of the element
+ *
+ * @param {Object} options - Options for resizing.
+ * @param {string} options.selector - The selector of the element.
+ * @param {string} options.startPosition - The start position for dragging.
+ * @param {string} options.endPosition - The end position for dragging.
+ * @param {Object} options.startXY - The start coordinates for dragging.
+ * @param {Object} options.endXY - The end coordinates for dragging.
+ * @param {string} options.button - Mouse button to use.
+ * @see https://github.com/dmtrKovalenko/cypress-real-events?tab=readme-ov-file#cyrealmousedown
+ * @see https://github.com/dmtrKovalenko/cypress-real-events/blob/main/src/commands/mouseDown.ts
+ */
+Cypress.Commands.add(
+    'resizeElement',
+    ({
+        selector = '',
+        startPosition = 'bottomRight',
+        endPosition = undefined,
+        startXY = undefined,
+        endXY = { x: 100, y: 100 },
+        button = 'left',
+    } = {}) => {
+        cy.get(selector).realMouseDown({
+            button,
+            ...(startXY ? { x: startXY.x, y: startXY.y } : { position: startPosition }),
+        })
+        cy.get(selector).realMouseDown({
+            button,
+            ...(endPosition ? { position: endPosition } : { x: endXY.x, y: endXY.y }),
+        })
+        cy.get(selector).realMouseUp({ button })
+    }
+)
+
 Cypress.Commands.add('waitAllLayersLoaded', ({ queryParams = {}, legacy = false } = {}) => {
     cy.waitUntilState(
         (state, getters) => {
diff --git a/tests/cypress/tests-e2e/drawing.cy.js b/tests/cypress/tests-e2e/drawing.cy.js
index e31f778f03..3a7180bb75 100644
--- a/tests/cypress/tests-e2e/drawing.cy.js
+++ b/tests/cypress/tests-e2e/drawing.cy.js
@@ -263,6 +263,7 @@ describe('Drawing module tests', () => {
                         ])
                     )
                 cy.get('[data-cy="drawing-style-text-button"]').click()
+                cy.get('[data-cy="drawing-style-text-popup"]').should('not.exist')
 
                 // changing/editing the description of this marker
                 const description = 'A description for this marker'
diff --git a/tests/cypress/tests-e2e/infobox.cy.js b/tests/cypress/tests-e2e/infobox.cy.js
index b0b1c62e51..5bea34a858 100644
--- a/tests/cypress/tests-e2e/infobox.cy.js
+++ b/tests/cypress/tests-e2e/infobox.cy.js
@@ -107,6 +107,38 @@ describe('The infobox', () => {
         })
         generateInfoboxTestsForMapSelector('[data-cy="ol-map"]')
     })
+
+    context('Changes the language of the infobox', () => {
+        beforeEach(() => {
+            cy.goToMapView({ layers: layer })
+            cy.intercept('**/MapServer/**/htmlPopup**&lang=de**', {
+                fixture: 'html-popup-german.fixture.html',
+            }).as('htmlPopupGerman')
+        })
+        it('changes the language of the infobox', () => {
+            cy.get('[data-cy="ol-map"]').click()
+            cy.waitUntilState((_, getters) => {
+                return getters.selectedFeatures.length > 0
+            })
+            const htmlPopupCalls = 10
+            cy.get('@htmlPopup.all').should('have.length', htmlPopupCalls)
+
+            cy.clickOnLanguage('de')
+
+            cy.closeMenuIfMobile()
+
+            cy.wait(['@layers', '@topics', '@topic-ech', '@featureDetail', '@htmlPopupGerman'])
+            cy.get('@htmlPopup.all').should('have.length', htmlPopupCalls)
+            cy.get('.htmlpopup-content')
+                .should('be.visible')
+                .should('contain', 'Beschreibung')
+                .should('contain', 'Ich bin ein Testfenster')
+                .should('contain', 'Stadt')
+                .should('contain', 'Kanton')
+                .should('contain', 'Mehr Informationen')
+                .should('contain', 'Link zum Object')
+        })
+    })
     // since we've been serving fake tiles to Cesium, the location popup is broken as Cesium can't return proper coordinates
     // we need to fix this Cesium fake tile issue before reactivating this test context
     // TODO : BGDIINF_SB-3181
diff --git a/tests/cypress/tests-e2e/layers.cy.js b/tests/cypress/tests-e2e/layers.cy.js
index d77b36fc62..da0dcd3a11 100644
--- a/tests/cypress/tests-e2e/layers.cy.js
+++ b/tests/cypress/tests-e2e/layers.cy.js
@@ -905,10 +905,16 @@ describe('Test of layer handling', () => {
                 const layerId = visibleLayerIds[0]
                 // mocking up the backend response for the legend
                 const fakeHtmlResponse = '<div>Test</div>'
+                const germanText = 'Test in German'
+                const fakeHtmlResponseGerman = `<div>${germanText}</div>`
                 cy.intercept(
                     `**/rest/services/all/MapServer/${layerId}/legend**`,
                     fakeHtmlResponse
                 ).as('legend')
+                cy.intercept(
+                    `**/rest/services/all/MapServer/${layerId}/legend**?lang=de**`,
+                    fakeHtmlResponseGerman
+                ).as('legendGerman')
                 // opening layer settings
                 cy.openLayerSettings(layerId)
                 // clicking on the layer info button
@@ -916,9 +922,19 @@ describe('Test of layer handling', () => {
                     .should('be.visible')
                     .click()
                 // checking that the backend has been requested for this layer's legend
+                const legendCalls = 1
                 cy.wait('@legend')
+                cy.get('@legend.all').should('have.length', legendCalls)
                 // checking that the content of the popup is our mocked up content
                 cy.get('[data-cy="layer-description"]').should('be.visible').contains('Test')
+
+                // Changes the language to see if the legend is displayed in the correct language
+                cy.viewport(900, 800)
+                cy.clickOnLanguage('de')
+                cy.wait('@legendGerman')
+                cy.get('@legend.all').should('have.length', legendCalls)
+
+                cy.get('[data-cy="layer-description"]').should('be.visible').contains(germanText)
             })
         })
         context('Timestamp management', () => {
diff --git a/tests/cypress/tests-e2e/topics.cy.js b/tests/cypress/tests-e2e/topics.cy.js
index bc7980c625..1d15f91378 100644
--- a/tests/cypress/tests-e2e/topics.cy.js
+++ b/tests/cypress/tests-e2e/topics.cy.js
@@ -246,4 +246,147 @@ describe('Topics', () => {
             ])
         })
     })
+
+    // This test is very flaky, the legend is only sometimes resized and I have not found a solution yet to make it more stable therefore it is skiped for now
+    it.skip('Modify the legend display', () => {
+        cy.viewport(1920, 1080)
+
+        cy.goToMapView({
+            layers: 'test.wmts.layer',
+            bgLayer: 'void',
+        })
+        cy.wait(['@topics', '@topic-ech', '@layers', '@routeChange', '@routeChange'])
+        cy.log('it opens the layer legend popup when clicking the info button')
+        cy.fixture('legend.fixture.html').then((legend) => {
+            cy.intercept(`**/rest/services/all/MapServer/*/legend**`, legend).as('legend')
+            cy.get('[data-cy="button-open-visible-layer-settings-test.wmts.layer-0"]')
+                .should('be.visible')
+                .click()
+            cy.get('[data-cy="button-toggle-visibility-layer-test.wmts.layer-0"]') // this is not necessary but it prevents from selecting random objects from the layer
+                .should('be.visible')
+                .click()
+            cy.get('[data-cy="button-show-description-layer-test.wmts.layer-0"]')
+                .should('be.visible')
+                .click()
+            cy.wait('@legend')
+
+            const popupSelector = '[data-cy="simple-window"]'
+            const popupSelectorHeader = '[data-cy="window-header"]'
+            const moveX = 100
+            const moveY = 120
+            const bottomRightMargin = 3
+
+            cy.get(popupSelector).then((popup) => {
+                const rect = popup[0].getBoundingClientRect()
+                const initialPosition = { x: rect.x, y: rect.y }
+                cy.dragMouse(popupSelectorHeader, moveX, moveY)
+                cy.get(popupSelector).then((popup) => {
+                    const rect = popup[0].getBoundingClientRect()
+                    expect(rect.x).to.be.closeTo(initialPosition.x + moveX, 1) // Allow small margin for floating-point
+                    expect(rect.y).to.be.closeTo(initialPosition.y + moveY, 1)
+                })
+            })
+            const increasedX = 100
+            const increasedY = 100
+            cy.log('resize the legend popup')
+            cy.log('reduce the size of the legend popup to the half')
+            cy.get(popupSelector).then((popup) => {
+                const rect = popup[0].getBoundingClientRect()
+                const initialDimensions = { height: rect.height, width: rect.width }
+                let genArr = Array.from({ length: 15 }, (v, k) => k + 1)
+                cy.wrap(genArr).each((index) => {
+                    cy.log('reduce size loop 1 for index', index)
+                    cy.resizeElement({
+                        selector: popupSelector,
+                        startXY: {
+                            x: initialDimensions.width - bottomRightMargin - index,
+                            y: initialDimensions.height - bottomRightMargin - index,
+                        },
+                        endPosition: 'right',
+                    })
+                })
+                cy.wrap(genArr).each((index) => {
+                    cy.log('reduce size loop 2 for index', index)
+                    cy.resizeElement({
+                        selector: popupSelector,
+                        startXY: {
+                            x: initialDimensions.width - bottomRightMargin + index,
+                            y: initialDimensions.height - bottomRightMargin + index,
+                        },
+                        endPosition: 'right',
+                    })
+                })
+                cy.wrap(genArr).each((index) => {
+                    cy.log('reduce size loop 3 for index', index)
+                    cy.get(popupSelector).realMouseDown({
+                        button: 'left',
+                        x: initialDimensions.width - bottomRightMargin - index,
+                        y: initialDimensions.height - bottomRightMargin - index,
+                    })
+                    cy.get(popupSelector).realMouseDown({
+                        button: 'left',
+                        endPosition: 'right',
+                    })
+                    cy.get(popupSelector).realMouseUp({ button: 'left' })
+                })
+
+                cy.get(popupSelector).then((popup) => {
+                    const rect = popup[0].getBoundingClientRect()
+                    expect(rect.height).to.not.eq(initialDimensions.height)
+                })
+            })
+
+            cy.log('increase the size of the legend popup by 100px')
+            cy.get(popupSelector).then((popup) => {
+                const rect = popup[0].getBoundingClientRect()
+                const initialDimensions = { height: rect.height, width: rect.width }
+
+                let genArr = Array.from({ length: 15 }, (v, k) => k + 1)
+                cy.wrap(genArr).each((index) => {
+                    cy.log('increase sice loop 1 for index', index)
+                    cy.resizeElement({
+                        selector: popupSelector,
+                        startXY: {
+                            x: initialDimensions.width - bottomRightMargin - index,
+                            y: initialDimensions.height - bottomRightMargin - index,
+                        },
+                        endXY: {
+                            x: increasedX + initialDimensions.width,
+                            y: increasedY + initialDimensions.height,
+                        },
+                    })
+                })
+                cy.wrap(genArr).each((index) => {
+                    cy.log('increase size loop 2 for index', index)
+                    cy.resizeElement({
+                        selector: popupSelector,
+                        startXY: {
+                            x: initialDimensions.width - bottomRightMargin + index,
+                            y: initialDimensions.height - bottomRightMargin + index,
+                        },
+                        endXY: {
+                            x: increasedX + initialDimensions.width,
+                            y: increasedY + initialDimensions.height,
+                        },
+                    })
+                })
+                cy.wrap(genArr).each((index) => {
+                    cy.log('increase size loop 3 for index', index)
+                    cy.resizeElement({
+                        selector: popupSelector,
+                        startPosition: 'bottomRight',
+                        endXY: {
+                            x: increasedX + initialDimensions.width,
+                            y: increasedY + initialDimensions.height,
+                        },
+                    })
+                })
+                cy.get(popupSelector).then((popup) => {
+                    const rect = popup[0].getBoundingClientRect()
+                    expect(rect.width).to.not.eq(initialDimensions.width)
+                    expect(rect.height).to.not.eq(initialDimensions.height)
+                })
+            })
+        })
+    })
 })