diff --git a/src/utils/components/SimpleWindow.vue b/src/utils/components/SimpleWindow.vue
index 6866330e2e..092760f683 100644
--- a/src/utils/components/SimpleWindow.vue
+++ b/src/utils/components/SimpleWindow.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref, toRefs } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 
@@ -57,7 +57,10 @@ const emit = defineEmits(['close'])
 const windowRef = ref(null)
 const headerRef = ref(null)
 const contentRef = ref(null)
+const size = ref({ width: 0, height: 0 })
+const lastClick = ref({ x: 0, y: 0 })
 
+let resizeObserver = ref(null)
 const initialPositionClass = computed(() => {
     if (accepetedInitialPositions.includes(props.initialPosition)) {
         return props.initialPosition
@@ -67,6 +70,15 @@ const initialPositionClass = computed(() => {
 })
 
 onMounted(() => {
+    resizeObserver.value = new ResizeObserver((entries) => {
+        for (let entry of entries) {
+            const { width, height } = entry.contentRect
+            size.value = { width, height }
+        }
+    })
+    if (windowRef.value) {
+        resizeObserver.value.observe(windowRef.value)
+    }
     if (props.movable) {
         const windowElement = windowRef.value
         const headerElement = headerRef.value
@@ -77,6 +89,19 @@ onMounted(() => {
         })
     }
 })
+onBeforeUnmount(() => {
+    if (resizeObserver.value) resizeObserver.value.disconnect()
+})
+watch(size, (newSize) => {
+    console.log('Size:', newSize)
+})
+const logClick = (event) => {
+    lastClick.value = {
+        x: event.offsetX,
+        y: event.offsetY,
+    }
+    console.log('Click coordinates relative to the element:', lastClick.value, event.type)
+}
 </script>
 
 <template>
@@ -93,6 +118,10 @@ onMounted(() => {
                     resizable: resizeable && showBody,
                 },
             ]"
+            data-cy="simple-window"
+            @click="logClick"
+            @mousedown="logClick"
+            @mouseup="logClick"
         >
             <div
                 ref="headerRef"
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 c9197b3937..1e15167494 100644
--- a/tests/cypress/support/commands.js
+++ b/tests/cypress/support/commands.js
@@ -465,6 +465,61 @@ 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/topics.cy.js b/tests/cypress/tests-e2e/topics.cy.js
index bc7980c625..39ced469b1 100644
--- a/tests/cypress/tests-e2e/topics.cy.js
+++ b/tests/cypress/tests-e2e/topics.cy.js
@@ -246,4 +246,220 @@ describe('Topics', () => {
             ])
         })
     })
+    it('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 }
+                console.log('initialDimensions', initialDimensions)
+                // startPosition: 'bottomRight' can also work but in my tests it only worked when the console was open during the test run. To fix this i manually select the bottom right corner using coordinates
+                cy.resizeElement({
+                    selector: popupSelector,
+                    startXY: {
+                        x: initialDimensions.width - bottomRightMargin - 1,
+                        y: initialDimensions.height - bottomRightMargin - 1,
+                    },
+                    endPosition: 'right',
+                })
+                cy.resizeElement({
+                    selector: popupSelector,
+                    startXY: {
+                        x: initialDimensions.width - bottomRightMargin - 2,
+                        y: initialDimensions.height - bottomRightMargin - 2,
+                    },
+                    endPosition: 'right',
+                })
+                cy.resizeElement({
+                    selector: popupSelector,
+                    startXY: {
+                        x: initialDimensions.width - bottomRightMargin - 3,
+                        y: initialDimensions.height - bottomRightMargin - 3,
+                    },
+                    endPosition: 'right',
+                })
+                cy.resizeElement({
+                    selector: popupSelector,
+                    startXY: {
+                        x: initialDimensions.width - bottomRightMargin - 4,
+                        y: initialDimensions.height - bottomRightMargin - 4,
+                    },
+                    endPosition: 'right',
+                })
+                cy.resizeElement({
+                    selector: popupSelector,
+                    startXY: {
+                        x: initialDimensions.width - bottomRightMargin - 5,
+                        y: initialDimensions.height - bottomRightMargin - 5,
+                    },
+                    endPosition: 'right',
+                })
+                cy.resizeElement({
+                    selector: popupSelector,
+                    startXY: {
+                        x: initialDimensions.width - bottomRightMargin - 6,
+                        y: initialDimensions.height - bottomRightMargin - 6,
+                    },
+                    endPosition: 'right',
+                })
+                cy.resizeElement({
+                    selector: popupSelector,
+                    startXY: {
+                        x: initialDimensions.width - bottomRightMargin - 7,
+                        y: initialDimensions.height - bottomRightMargin - 7,
+                    },
+                    endPosition: 'right',
+                })
+                cy.resizeElement({
+                    selector: popupSelector,
+                    startPosition: 'bottomRight',
+                    endPosition: 'right',
+                })
+                cy.resizeElement({
+                    selector: popupSelector,
+                    startXY: {
+                        x: initialDimensions.width - bottomRightMargin - 8,
+                        y: initialDimensions.height - bottomRightMargin - 8,
+                    },
+                    endPosition: 'right',
+                })
+                cy.resizeElement({
+                    selector: popupSelector,
+                    startXY: {
+                        x: initialDimensions.width - bottomRightMargin - 9,
+                        y: initialDimensions.height - bottomRightMargin - 9,
+                    },
+                    endPosition: 'right',
+                })
+                cy.resizeElement({
+                    selector: popupSelector,
+                    startXY: {
+                        x: initialDimensions.width - bottomRightMargin - 10,
+                        y: initialDimensions.height - bottomRightMargin - 10,
+                    },
+                    endPosition: 'right',
+                })
+                cy.resizeElement({
+                    selector: popupSelector,
+                    startXY: {
+                        x: initialDimensions.width - bottomRightMargin - 11,
+                        y: initialDimensions.height - bottomRightMargin - 11,
+                    },
+                    endPosition: 'right',
+                })
+                cy.resizeElement({
+                    selector: popupSelector,
+                    startXY: {
+                        x: initialDimensions.width - bottomRightMargin - 12,
+                        y: initialDimensions.height - bottomRightMargin - 12,
+                    },
+                    endPosition: 'right',
+                })
+                cy.resizeElement({
+                    selector: popupSelector,
+                    startXY: {
+                        x: initialDimensions.width - bottomRightMargin - 13,
+                        y: initialDimensions.height - bottomRightMargin - 13,
+                    },
+                    endPosition: 'right',
+                })
+                cy.resizeElement({
+                    selector: popupSelector,
+                    startXY: {
+                        x: initialDimensions.width - bottomRightMargin - 14,
+                        y: initialDimensions.height - bottomRightMargin - 14,
+                    },
+                    endPosition: 'right',
+                })
+                cy.get(popupSelector).then((popup) => {
+                    const rect = popup[0].getBoundingClientRect()
+                    expect(rect.height).to.not.eq(
+                        initialDimensions.height
+                    ) // Allow small margin
+                    // expect(rect.height).to.be.closeTo(
+                    //     initialDimensions.height / 2,
+                    //     bottomRightMargin + 10
+                    // ) // Allow small margin
+                })
+            })
+
+
+            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 }
+                cy.resizeElement({
+                    selector: popupSelector,
+                    startXY: {
+                        x: initialDimensions.width - bottomRightMargin,
+                        y: initialDimensions.height - bottomRightMargin,
+                    },
+                    endXY: {
+                        x: increasedX + initialDimensions.width,
+                        y: increasedY + initialDimensions.height,
+                    },
+                })
+                cy.get(popupSelector).then((popup) => {
+                    const rect = popup[0].getBoundingClientRect()
+                    // expect(rect.width).to.be.closeTo(
+                    //     increasedX + initialDimensions.width,
+                    //     bottomRightMargin + 10
+                    // )
+                    // expect(rect.height).to.be.closeTo(
+                    //     increasedY + initialDimensions.height,
+                    //     bottomRightMargin + 10
+                    // ) // Allow small margin
+                    // expect(rect.height).to.be.closeTo(
+                    //     increasedY + initialDimensions.height,
+                    //     bottomRightMargin + 10
+                    // ) // Allow small margin
+                    expect(rect.width).to.not.eq(
+                        initialDimensions.width
+                    )
+                    expect(rect.height).to.not.eq(
+                        initialDimensions.height
+                    )
+                })
+            })
+        })
+    })
 })