From 0bfa3d941437e326d57c11d3e6345234b559dd35 Mon Sep 17 00:00:00 2001
From: Pascal Barth <pak.barth@gmail.com>
Date: Fri, 30 Aug 2024 07:59:13 +0200
Subject: [PATCH 1/3] PB-788 : stop using reserved "id" property for menu
 section identifier

It wasn't handled properly when a child component was declaring the ID itself, the parent MenuTray couldn't access the value of ID.
---
 .../menu/components/menu/MenuSection.vue      |  8 +++---
 src/modules/menu/components/menu/MenuTray.vue | 26 +++++++++----------
 .../components/print/MenuPrintSection.vue     | 10 ++++---
 .../components/share/MenuShareSection.vue     |  6 ++---
 .../components/topics/MenuTopicSection.vue    | 14 +++++-----
 5 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/src/modules/menu/components/menu/MenuSection.vue b/src/modules/menu/components/menu/MenuSection.vue
index fbe6ad8bc..7237cd0d6 100644
--- a/src/modules/menu/components/menu/MenuSection.vue
+++ b/src/modules/menu/components/menu/MenuSection.vue
@@ -52,7 +52,7 @@ export default {
     },
     props: {
         // String that uniquely identifies this section
-        id: {
+        sectionId: {
             type: String,
             required: true,
         },
@@ -78,7 +78,7 @@ export default {
             default: false,
         },
     },
-    expose: ['close', 'open', 'id'],
+    expose: ['close', 'open', 'sectionId'],
     emits: ['openMenuSection', 'closeMenuSection', 'click:header'],
     data() {
         return {
@@ -111,9 +111,9 @@ export default {
             if (this.showBody !== value) {
                 this.showBody = value
                 if (this.showBody) {
-                    this.$emit('openMenuSection', this.id)
+                    this.$emit('openMenuSection', this.sectionId)
                 } else {
-                    this.$emit('closeMenuSection', this.id)
+                    this.$emit('closeMenuSection', this.sectionId)
                 }
             }
         },
diff --git a/src/modules/menu/components/menu/MenuTray.vue b/src/modules/menu/components/menu/MenuTray.vue
index a1a74788a..585a4c305 100644
--- a/src/modules/menu/components/menu/MenuTray.vue
+++ b/src/modules/menu/components/menu/MenuTray.vue
@@ -82,9 +82,9 @@ function onCloseMenuSection(id) {
  *
  * @param {any} el Reference to the element
  */
-function addRefById(el) {
-    if (el !== null && !Object.keys(refs.value).includes(el.id)) {
-        refs.value[el.id] = el
+function addRefBySectionId(el) {
+    if (el !== null && !Object.keys(refs.value).includes(el.sectionId)) {
+        refs.value[el.sectionId] = el
     }
 }
 </script>
@@ -104,21 +104,21 @@ function addRefById(el) {
             <MenuSettings />
         </MenuSection>
         <MenuShareSection
-            :ref="addRefById"
+            :ref="addRefBySectionId"
             :compact="compact"
             @open-menu-section="onOpenMenuSection"
             @close-menu-section="onCloseMenuSection"
         />
         <MenuPrintSection
             v-if="!is3dMode"
-            :ref="addRefById"
+            :ref="addRefBySectionId"
             @open-menu-section="onOpenMenuSection"
         />
         <!-- Drawing section is a glorified button, we always keep it closed and listen to click events -->
         <div id="drawSectionTooltip" tabindex="0">
             <MenuSection
                 v-if="!is3dMode"
-                id="drawSection"
+                section-id="drawSection"
                 :title="i18n.t('draw_panel_title')"
                 secondary
                 :show-content="showDrawingOverlay"
@@ -135,8 +135,8 @@ function addRefById(el) {
             />
         </div>
         <MenuSection
-            id="toolsSection"
-            :ref="addRefById"
+            :ref="addRefBySectionId"
+            section-id="toolsSection"
             data-cy="menu-tray-tool-section"
             :title="i18n.t('map_tools')"
             secondary
@@ -147,8 +147,8 @@ function addRefById(el) {
         </MenuSection>
         <MenuSection
             v-if="is3dMode"
-            id="3dSection"
-            :ref="addRefById"
+            :ref="addRefBySectionId"
+            section-id="3dSection"
             data-cy="menu-tray-3d-section"
             title="3D"
             secondary
@@ -158,15 +158,15 @@ function addRefById(el) {
             <MenuThreeD :compact="compact" />
         </MenuSection>
         <MenuTopicSection
-            :ref="addRefById"
+            :ref="addRefBySectionId"
             :compact="compact"
             @open-menu-section="onOpenMenuSection"
         />
         <!-- Here below we MUST wait that the map has been rendered before displaying any menu
              content, otherwise this would slow down the application startup -->
         <MenuSection
-            id="activeLayersSection"
-            :ref="addRefById"
+            :ref="addRefBySectionId"
+            section-id="activeLayersSection"
             :title="i18n.t('layers_displayed')"
             light
             :show-content="mapModuleReady"
diff --git a/src/modules/menu/components/print/MenuPrintSection.vue b/src/modules/menu/components/print/MenuPrintSection.vue
index 28c212c89..a7353202c 100644
--- a/src/modules/menu/components/print/MenuPrintSection.vue
+++ b/src/modules/menu/components/print/MenuPrintSection.vue
@@ -17,6 +17,7 @@ const dispatcher = { dispatcher: 'MapPrintSection.vue' }
 
 const emits = defineEmits(['openMenuSection'])
 
+const sectionId = ref('printSection')
 const isSectionShown = ref(false)
 const printGrid = ref(false)
 const printLegend = ref(false)
@@ -117,22 +118,23 @@ async function printMap() {
     }
 }
 
-function onOpenMenuSection(id) {
+function onOpenMenuSection(sectionId) {
     if (printStatus.value !== PrintStatus.PRINTING) {
         printStatus.value = PrintStatus.IDLE
     }
-    emits('openMenuSection', id)
+    emits('openMenuSection', sectionId)
 }
 
 defineExpose({
     close,
+    sectionId,
 })
 </script>
 
 <template>
     <MenuSection
-        id="printSection"
-        :title="$t('print')"
+        :section-id="sectionId"
+        :title="i18n.t('print')"
         :show-content="isSectionShown"
         data-cy="menu-print-section"
         secondary
diff --git a/src/modules/menu/components/share/MenuShareSection.vue b/src/modules/menu/components/share/MenuShareSection.vue
index 7f5c5d573..0dca354ce 100644
--- a/src/modules/menu/components/share/MenuShareSection.vue
+++ b/src/modules/menu/components/share/MenuShareSection.vue
@@ -1,6 +1,6 @@
 <template>
     <MenuSection
-        id="shareSection"
+        :section-id="sectionId"
         :title="$t('share')"
         :show-content="isSectionShown"
         data-cy="menu-share-section"
@@ -48,9 +48,9 @@ export default {
         },
     },
     emits: ['openMenuSection'],
-    expose: ['close', 'id'],
+    expose: ['close', 'sectionId'],
     data() {
-        return { id: 'shareSection' }
+        return { sectionId: 'shareSection' }
     },
     computed: {
         ...mapState({
diff --git a/src/modules/menu/components/topics/MenuTopicSection.vue b/src/modules/menu/components/topics/MenuTopicSection.vue
index 04916a7ff..f3d8c72c9 100644
--- a/src/modules/menu/components/topics/MenuTopicSection.vue
+++ b/src/modules/menu/components/topics/MenuTopicSection.vue
@@ -25,7 +25,7 @@ const menuTopicSection = ref(null)
 const showTopicSelectionPopup = ref(false)
 
 // The id needs to be exposed and is used by the MenuTray to close sections.
-const id = 'topicsSection'
+const sectionId = 'topicsSection'
 const currentTopic = computed(() => store.state.topics.current)
 const currentTopicTree = computed(() => store.state.topics.tree)
 const allTopics = computed(() => store.state.topics.config)
@@ -51,23 +51,23 @@ function close() {
     menuTopicSection.value.close()
 }
 
-function onOpenMenuTopics(id) {
-    emit('openMenuSection', id)
+function onOpenMenuTopics(sectionId) {
+    emit('openMenuSection', sectionId)
     store.dispatch('addTopicTreeOpenedThemeId', { themeId: currentTopic.value, ...dispatcher })
 }
 
-function onCloseMenuTopics(id) {
-    emit('closeMenuSection', id)
+function onCloseMenuTopics(sectionId) {
+    emit('closeMenuSection', sectionId)
     store.dispatch('removeTopicTreeOpenedThemeId', { themeId: currentTopic.value, ...dispatcher })
 }
 
-defineExpose({ close, id })
+defineExpose({ close, id: sectionId })
 </script>
 
 <template>
     <MenuSection
-        :id="id"
         ref="menuTopicSection"
+        :section-id="sectionId"
         :title="i18n.t(currentTopic)"
         :show-content="showTopicTree"
         light

From 73266e036048100d49d1370359e94bca454af88c Mon Sep 17 00:00:00 2001
From: Pascal Barth <pak.barth@gmail.com>
Date: Fri, 30 Aug 2024 08:13:50 +0200
Subject: [PATCH 2/3] PB-788 : add new "Help" section on mobile/tablet

and add the language button as an extra button of this new section, so that it may be more easily accessed on mobile/touch devices.
---
 src/modules/i18n/components/LangButton.vue    |  49 ------
 .../i18n/components/LangSwitchToolbar.vue     |  40 -----
 .../components/header/HeaderLangSelector.vue  |  44 +++++
 .../menu/components/header/HeaderLink.vue     |  59 ++++---
 .../components/header/HeaderWithSearch.vue    | 126 +++++++-------
 .../{settings => help}/HelpLink.vue           |  17 +-
 .../menu/components/help/MenuHelpSection.vue  | 154 ++++++++++++++++++
 src/modules/menu/components/help/MoreInfo.vue |  28 ++++
 .../ReportProblemButton.vue                   |   5 +-
 .../common/SendActionButtons.vue              |   0
 .../feedback/FeedbackButton.vue               |   8 +-
 .../feedback/FeedbackRating.vue               |   0
 src/modules/menu/components/menu/MenuTray.vue |  23 +--
 .../components/print/MenuPrintSection.vue     |   2 +-
 .../menu/components/settings/LinksToolbar.vue |  36 ----
 .../menu/components/settings/MenuSettings.vue |  15 --
 .../menu/components/settings/MoreInfo.vue     |  26 ---
 src/scss/webmapviewer-bootstrap-theme.scss    |   7 +
 .../components/AppVersion.vue}                |   0
 src/views/MapView.vue                         |   4 +-
 tests/cypress/support/commands.js             |  14 +-
 tests/cypress/tests-e2e/feedback.cy.js        |   2 +-
 tests/cypress/tests-e2e/header.cy.js          |   7 +-
 tests/cypress/tests-e2e/layers.cy.js          |  14 +-
 tests/cypress/tests-e2e/menuTray.cy.js        |  11 +-
 tests/cypress/tests-e2e/reportProblem.cy.js   |   4 +-
 26 files changed, 378 insertions(+), 317 deletions(-)
 delete mode 100644 src/modules/i18n/components/LangButton.vue
 delete mode 100644 src/modules/i18n/components/LangSwitchToolbar.vue
 create mode 100644 src/modules/menu/components/header/HeaderLangSelector.vue
 rename src/modules/menu/components/{settings => help}/HelpLink.vue (75%)
 create mode 100644 src/modules/menu/components/help/MenuHelpSection.vue
 create mode 100644 src/modules/menu/components/help/MoreInfo.vue
 rename src/modules/menu/components/{settings => help}/ReportProblemButton.vue (98%)
 rename src/modules/menu/components/{settings => help}/common/SendActionButtons.vue (100%)
 rename src/modules/menu/components/{settings => help}/feedback/FeedbackButton.vue (95%)
 rename src/modules/menu/components/{settings => help}/feedback/FeedbackRating.vue (100%)
 delete mode 100644 src/modules/menu/components/settings/LinksToolbar.vue
 delete mode 100644 src/modules/menu/components/settings/MenuSettings.vue
 delete mode 100644 src/modules/menu/components/settings/MoreInfo.vue
 rename src/{modules/map/components/footer/MapFooterAppVersion.vue => utils/components/AppVersion.vue} (100%)

diff --git a/src/modules/i18n/components/LangButton.vue b/src/modules/i18n/components/LangButton.vue
deleted file mode 100644
index 064193641..000000000
--- a/src/modules/i18n/components/LangButton.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script setup>
-import { computed, toRefs } from 'vue'
-import { useStore } from 'vuex'
-
-import HeaderLink from '@/modules/menu/components/header/HeaderLink.vue'
-import log from '@/utils/logging'
-
-const dispatcher = { dispatcher: 'LangButton.vue' }
-
-const store = useStore()
-
-const props = defineProps({
-    lang: {
-        type: String,
-        required: true,
-    },
-    showAsLinks: {
-        type: Boolean,
-        default: false,
-    },
-})
-const { lang, showAsLinks } = toRefs(props)
-
-const currentLang = computed(() => store.state.i18n.lang)
-
-function changeLang() {
-    log.debug('switching locale', lang.value)
-    store.dispatch('setLang', { lang: lang.value, ...dispatcher })
-}
-</script>
-
-<template>
-    <HeaderLink v-if="showAsLinks" :primary="currentLang === lang" @click="changeLang">
-        {{ lang.toUpperCase() }}
-    </HeaderLink>
-    <button
-        v-else
-        class="btn mx-1"
-        :class="{
-            'btn-light': currentLang !== lang,
-            'btn-primary': currentLang === lang,
-        }"
-        :title="lang.toUpperCase()"
-        :data-cy="`menu-lang-${lang}`"
-        @click="changeLang"
-    >
-        {{ lang.toUpperCase() }}
-    </button>
-</template>
diff --git a/src/modules/i18n/components/LangSwitchToolbar.vue b/src/modules/i18n/components/LangSwitchToolbar.vue
deleted file mode 100644
index f31fd93a2..000000000
--- a/src/modules/i18n/components/LangSwitchToolbar.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup>
-import { ref, toRefs } from 'vue'
-
-import { languages as availableLanguages } from '../index'
-import LangButton from './LangButton.vue'
-
-const props = defineProps({
-    showAsLinks: {
-        type: Boolean,
-        default: false,
-    },
-})
-const { showAsLinks } = toRefs(props)
-
-const languages = ref(Object.keys(availableLanguages))
-</script>
-
-<template>
-    <div
-        :class="{
-            'lang-switch-menu p-1': !showAsLinks,
-            'lang-switch-header me-2': showAsLinks,
-        }"
-    >
-        <LangButton
-            v-for="lang in languages"
-            :key="lang"
-            :lang="lang"
-            :show-as-links="showAsLinks"
-        />
-    </div>
-</template>
-
-<style lang="scss" scoped>
-@import '@/scss/webmapviewer-bootstrap-theme';
-
-.lang-switch-menu {
-    transition: max-height 0.3s linear;
-}
-</style>
diff --git a/src/modules/menu/components/header/HeaderLangSelector.vue b/src/modules/menu/components/header/HeaderLangSelector.vue
new file mode 100644
index 000000000..689724483
--- /dev/null
+++ b/src/modules/menu/components/header/HeaderLangSelector.vue
@@ -0,0 +1,44 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { useStore } from 'vuex'
+
+import { languages as availableLanguages } from '@/modules/i18n'
+import HeaderLink from '@/modules/menu/components/header/HeaderLink.vue'
+import log from '@/utils/logging'
+
+const dispatcher = { dispatcher: 'HeaderLangSelector.vue' }
+
+const store = useStore()
+
+const languages = ref(Object.keys(availableLanguages))
+const currentLang = computed(() => store.state.i18n.lang)
+
+function changeLang(lang) {
+    log.debug('switching locale', lang)
+    store.dispatch('setLang', { lang, ...dispatcher })
+}
+</script>
+
+<template>
+    <div class="lang-switch-header me-2">
+        <HeaderLink
+            v-for="lang in languages"
+            :key="lang"
+            :primary="currentLang === lang"
+            @click="changeLang(lang)"
+        >
+            {{ lang.toUpperCase() }}
+        </HeaderLink>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@import '@/scss/webmapviewer-bootstrap-theme';
+
+.lang-switch-menu {
+    transition: max-height 0.3s linear;
+}
+.lang-switch-header {
+    display: flex;
+}
+</style>
diff --git a/src/modules/menu/components/header/HeaderLink.vue b/src/modules/menu/components/header/HeaderLink.vue
index 7406abb5b..c66851306 100644
--- a/src/modules/menu/components/header/HeaderLink.vue
+++ b/src/modules/menu/components/header/HeaderLink.vue
@@ -1,7 +1,39 @@
+<script setup>
+/**
+ * As we've many link like buttons in the header, this component aims at having the CSS required for
+ * such link-button once
+ */
+import { toRefs } from 'vue'
+
+const props = defineProps({
+    primary: {
+        type: Boolean,
+        default: false,
+    },
+    secondary: {
+        type: Boolean,
+        default: false,
+    },
+    showAsButton: {
+        type: Boolean,
+        default: false,
+    },
+})
+const { primary, secondary, showAsButton } = toRefs(props)
+
+const emits = defineEmits(['click'])
+
+function forwardClickEvent(e) {
+    emits('click', e)
+}
+</script>
+
 <template>
     <button
-        class="btn btn-xs btn-link m-0 px-1 custom-text-decoration"
+        class="btn m-0 px-1 custom-text-decoration"
         :class="{
+            'btn-xs btn-link': !showAsButton,
+            'btn-light border-light-subtle': showAsButton,
             'text-black': !primary && !secondary,
             'text-primary': primary,
             'text-secondary': secondary,
@@ -12,31 +44,6 @@
     </button>
 </template>
 
-<script>
-/**
- * As we've many link like buttons in the header, this component aims at having the CSS required for
- * such link-button once
- */
-export default {
-    props: {
-        primary: {
-            type: Boolean,
-            default: false,
-        },
-        secondary: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    emits: ['click'],
-    methods: {
-        forwardClickEvent(e) {
-            this.$emit('click', e)
-        },
-    },
-}
-</script>
-
 <style lang="scss" scoped>
 @import '@/scss/webmapviewer-bootstrap-theme';
 
diff --git a/src/modules/menu/components/header/HeaderWithSearch.vue b/src/modules/menu/components/header/HeaderWithSearch.vue
index d1fc41307..2894dbdff 100644
--- a/src/modules/menu/components/header/HeaderWithSearch.vue
+++ b/src/modules/menu/components/header/HeaderWithSearch.vue
@@ -1,3 +1,58 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
+
+import HeaderLangSelector from '@/modules/menu/components/header/HeaderLangSelector.vue'
+import HeaderMenuButton from '@/modules/menu/components/header/HeaderMenuButton.vue'
+import HeaderSwissConfederationText from '@/modules/menu/components/header/HeaderSwissConfederationText.vue'
+import SwissFlag from '@/modules/menu/components/header/SwissFlag.vue'
+import FeedbackButton from '@/modules/menu/components/help/feedback/FeedbackButton.vue'
+import HelpLink from '@/modules/menu/components/help/HelpLink.vue'
+import MoreInfo from '@/modules/menu/components/help/MoreInfo.vue'
+import ReportProblemButton from '@/modules/menu/components/help/ReportProblemButton.vue'
+import SearchBar from '@/modules/menu/components/search/SearchBar.vue'
+
+const dispatcher = { dispatcher: 'HeaderWithSearch.vue' }
+
+const header = ref(null)
+
+const store = useStore()
+const { t } = useI18n()
+
+const currentLang = computed(() => store.state.i18n.lang)
+const currentTopicId = computed(() => store.state.topics.current)
+const isPhoneMode = computed(() => store.getters.isPhoneMode)
+const hasDevSiteWarning = computed(() => store.getters.hasDevSiteWarning)
+const hasGiveFeedbackButton = computed(() => store.getters.hasGiveFeedbackButton)
+const hasReportProblemButton = computed(() => store.getters.hasReportProblemButton)
+
+onMounted(() => {
+    nextTick(() => {
+        // Initial height
+        updateHeaderHeight()
+        // Watch for changes in height
+        window.addEventListener('resize', updateHeaderHeight)
+    })
+})
+onBeforeUnmount(() => {
+    // Remove the event listener when the component is destroyed
+    window.removeEventListener('resize', updateHeaderHeight)
+})
+
+function updateHeaderHeight() {
+    store.dispatch('setHeaderHeight', {
+        height: header.value.clientHeight,
+        ...dispatcher,
+    })
+}
+
+function resetApp() {
+    // an app reset means we keep the lang and the current topic but everything else is thrown away
+    window.location = `${window.location.origin}?lang=${currentLang.value}&topic=${currentTopicId.value}`
+}
+</script>
+
 <template>
     <div ref="header" class="header" data-cy="app-header">
         <div class="header-content w-100 p-sm-0 p-md-1 d-flex align-items-center">
@@ -11,7 +66,7 @@
                 </div>
                 <HeaderSwissConfederationText
                     :current-lang="currentLang"
-                    class="mx-2 cursor-pointer search-header-swiss-confederation-text"
+                    class="mx-2 cursor-pointer d-none d-lg-block search-header-swiss-confederation-text"
                     data-cy="menu-swiss-confederation-text"
                     @click="resetApp"
                 />
@@ -25,75 +80,22 @@
             <HeaderMenuButton v-if="isPhoneMode" class="mx-1" />
         </div>
         <div class="header-settings-section" data-cy="header-settings-section">
-            <LinksToolbar id="menu-links" :show-as-links="true" />
-            <LangSwitchToolbar id="menu-lang-selector" :show-as-links="true" />
+            <FeedbackButton v-if="hasGiveFeedbackButton" show-as-link />
+            <ReportProblemButton v-if="hasReportProblemButton" show-as-link />
+            <MoreInfo small />
+            <HelpLink small />
+            <HeaderLangSelector id="menu-lang-selector" />
         </div>
         <!-- eslint-disable vue/no-v-html-->
         <div
             v-if="hasDevSiteWarning"
             class="header-warning-dev bg-danger text-white text-center text-wrap text-truncate overflow-hidden fw-bold p-1"
-            v-html="$t('test_host_warning')"
+            v-html="t('test_host_warning')"
         />
         <!-- eslint-enable vue/no-v-html-->
     </div>
 </template>
 
-<script>
-import { mapGetters, mapState } from 'vuex'
-
-import LangSwitchToolbar from '@/modules/i18n/components/LangSwitchToolbar.vue'
-import HeaderMenuButton from '@/modules/menu/components/header/HeaderMenuButton.vue'
-import HeaderSwissConfederationText from '@/modules/menu/components/header/HeaderSwissConfederationText.vue'
-import SwissFlag from '@/modules/menu/components/header/SwissFlag.vue'
-import SearchBar from '@/modules/menu/components/search/SearchBar.vue'
-import LinksToolbar from '@/modules/menu/components/settings/LinksToolbar.vue'
-
-const dispatcher = { dispatcher: 'HeaderWithSearch.vue' }
-
-export default {
-    components: {
-        SearchBar,
-        HeaderMenuButton,
-        HeaderSwissConfederationText,
-        SwissFlag,
-        LangSwitchToolbar,
-        LinksToolbar,
-    },
-    computed: {
-        ...mapState({
-            currentLang: (state) => state.i18n.lang,
-            currentTopicId: (state) => state.topics.current,
-        }),
-        ...mapGetters(['isPhoneMode', 'hasDevSiteWarning']),
-    },
-    mounted() {
-        this.$nextTick(() => {
-            // Initial height
-            this.updateHeaderHeight()
-            // Watch for changes in height
-            window.addEventListener('resize', this.updateHeaderHeight)
-        })
-    },
-    beforeUnmount() {
-        // Remove the event listener when the component is destroyed
-        window.removeEventListener('resize', this.updateHeaderHeight)
-    },
-    methods: {
-        resetApp() {
-            // an app reset means we keep the lang and the current topic but everything else is thrown away
-            window.location = `${window.location.origin}?lang=${this.currentLang}&topic=${this.currentTopicId}`
-        },
-
-        updateHeaderHeight() {
-            this.$store.dispatch('setHeaderHeight', {
-                height: this.$refs.header.clientHeight,
-                ...dispatcher,
-            })
-        },
-    },
-}
-</script>
-
 <style lang="scss" scoped>
 @import '@/scss/media-query.mixin';
 @import '@/scss/variables.module';
@@ -139,13 +141,12 @@ $animation-time: 0.5s;
 
 .search-header-swiss-confederation-text,
 .search-title {
-    display: none;
     font-size: 0.825rem;
 }
 
 @include respond-below(lg) {
     .header-settings-section {
-        // See MenuTray.vue where the settings section is enable above lg
+        // See MenuTray.vue where the help section is enable above lg
         display: none !important;
     }
 
@@ -164,7 +165,6 @@ $animation-time: 0.5s;
             }
         }
     }
-    .search-header-swiss-confederation-text,
     .search-title {
         display: block;
     }
diff --git a/src/modules/menu/components/settings/HelpLink.vue b/src/modules/menu/components/help/HelpLink.vue
similarity index 75%
rename from src/modules/menu/components/settings/HelpLink.vue
rename to src/modules/menu/components/help/HelpLink.vue
index 6e3ff9cf9..93cc99c5e 100644
--- a/src/modules/menu/components/settings/HelpLink.vue
+++ b/src/modules/menu/components/help/HelpLink.vue
@@ -1,14 +1,22 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, toRefs } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 
 import HeaderLink from '@/modules/menu/components/header/HeaderLink.vue'
 
+const props = defineProps({
+    showAsButton: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const { showAsButton } = toRefs(props)
+
 const store = useStore()
 const i18n = useI18n()
 
-const isDesktopMode = computed(() => store.getters.isDesktopMode)
 const lang = computed(() => store.state.i18n.lang)
 const helpPage = computed(() => {
     if (lang.value === 'de' || lang.value === 'rm') {
@@ -30,10 +38,7 @@ function openCmsLink() {
 </script>
 
 <template>
-    <HeaderLink v-if="isDesktopMode" @click="openCmsLink">
+    <HeaderLink :show-as-button="showAsButton" @click="openCmsLink">
         {{ i18n.t('help_label') }}
     </HeaderLink>
-    <button v-else class="btn btn-light m-1" @click="openCmsLink">
-        {{ i18n.t('help_label') }}
-    </button>
 </template>
diff --git a/src/modules/menu/components/help/MenuHelpSection.vue b/src/modules/menu/components/help/MenuHelpSection.vue
new file mode 100644
index 000000000..5eca132f4
--- /dev/null
+++ b/src/modules/menu/components/help/MenuHelpSection.vue
@@ -0,0 +1,154 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
+
+import { languages } from '@/modules/i18n/index.js'
+import FeedbackButton from '@/modules/menu/components/help/feedback/FeedbackButton.vue'
+import HelpLink from '@/modules/menu/components/help/HelpLink.vue'
+import MoreInfo from '@/modules/menu/components/help/MoreInfo.vue'
+import ReportProblemButton from '@/modules/menu/components/help/ReportProblemButton.vue'
+import MenuSection from '@/modules/menu/components/menu/MenuSection.vue'
+import AppVersion from '@/utils/components/AppVersion.vue'
+import ModalWithBackdrop from '@/utils/components/ModalWithBackdrop.vue'
+
+const dispatcher = { dispatcher: 'MenuHelpSection.vue' }
+
+const emits = defineEmits(['openMenuSection'])
+
+const sectionId = 'helpSection'
+const showContent = ref(false)
+const showAboutUs = ref(false)
+
+const { t } = useI18n()
+const store = useStore()
+const hasGiveFeedbackButton = computed(() => store.getters.hasGiveFeedbackButton)
+const hasReportProblemButton = computed(() => store.getters.hasReportProblemButton)
+
+const currentLang = ref(store.state.i18n.lang)
+
+function changeLang(lang) {
+    store.dispatch('setLang', {
+        lang,
+        ...dispatcher,
+    })
+}
+
+function toggleShowContent() {
+    showContent.value = !showContent.value
+}
+
+function open() {
+    showContent.value = true
+}
+
+function close() {
+    showContent.value = false
+}
+
+function onOpenMenuSection(sectionId) {
+    emits('openMenuSection', sectionId)
+}
+
+defineExpose({
+    open,
+    close,
+    sectionId,
+})
+</script>
+
+<template>
+    <MenuSection
+        :section-id="sectionId"
+        :title="t('search_help')"
+        :show-content="showContent"
+        data-cy="menu-help-section"
+        secondary
+        @click:header="toggleShowContent"
+        @open-menu-section="onOpenMenuSection"
+    >
+        <div class="help-links p-2 d-flex flex-column gap-1" data-cy="menu-help-content">
+            <div class="d-flex gap-1 w-100 justify-content-stretch">
+                <FeedbackButton v-if="hasGiveFeedbackButton" />
+                <ReportProblemButton v-if="hasReportProblemButton" />
+            </div>
+            <HelpLink show-as-button />
+            <button class="btn btn-light border-light-subtle" @click="showAboutUs = true">
+                {{ t('about_us') }}
+            </button>
+            <ModalWithBackdrop
+                v-if="showAboutUs"
+                :title="t('about_us')"
+                @close="showAboutUs = false"
+            >
+                <div class="d-flex flex-column gap-1 w-100 justify-content-stretch">
+                    <MoreInfo show-as-button />
+                    <a
+                        :href="`https://www.geo.admin.ch/${currentLang}/home.html`"
+                        target="_blank"
+                        class="btn btn-light border-light-subtle"
+                    >
+                        {{ t('ech_service_link_label') }}
+                    </a>
+                    <a
+                        :href="t('copyright_url')"
+                        target="_blank"
+                        class="btn btn-light border-light-subtle"
+                    >
+                        {{ t('copyright_label') }}
+                    </a>
+                    <AppVersion class="mt-1 mobile-app-version text-center" />
+                </div>
+            </ModalWithBackdrop>
+        </div>
+        <template #extra-button>
+            <select
+                v-model="currentLang"
+                class="form-control form-control-sm menu-lang-switch bg-light text-dark"
+                data-cy="mobile-lang-selector"
+                @change="changeLang(currentLang)"
+                @click.stop
+            >
+                <option v-for="lang in Object.keys(languages)" :key="lang" :value="lang">
+                    {{ lang.toUpperCase() }}
+                </option>
+            </select>
+        </template>
+    </MenuSection>
+</template>
+
+<style lang="scss" scoped>
+@import '@/scss/webmapviewer-bootstrap-theme';
+.help-links {
+    width: 100%;
+    a {
+        color: $black;
+        text-decoration: initial;
+    }
+    a:hover,
+    a:focus {
+        text-decoration: underline;
+    }
+}
+.mobile-app-version {
+    font-size: 0.75rem;
+}
+
+.menu-lang-switch {
+    position: absolute;
+    right: 2px;
+    top: 4px;
+    width: 60px;
+    text-align: center;
+    border: 0;
+    background: none;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    outline: inherit;
+    &:hover,
+    &:focus {
+        text-decoration: underline;
+    }
+}
+</style>
diff --git a/src/modules/menu/components/help/MoreInfo.vue b/src/modules/menu/components/help/MoreInfo.vue
new file mode 100644
index 000000000..0da6fb2fb
--- /dev/null
+++ b/src/modules/menu/components/help/MoreInfo.vue
@@ -0,0 +1,28 @@
+<script setup>
+import { computed, toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import HeaderLink from '@/modules/menu/components/header/HeaderLink.vue'
+
+const props = defineProps({
+    showAsButton: {
+        type: Boolean,
+        default: false,
+    },
+})
+const { showAsButton } = toRefs(props)
+
+const { t } = useI18n()
+
+const cmsUrl = computed(() => t('cms_link_button_url'))
+
+function openCmsLink() {
+    window.open(cmsUrl.value, '_blank', 'noreferrer')
+}
+</script>
+
+<template>
+    <HeaderLink :show-as-button="showAsButton" @click="openCmsLink">
+        {{ t('cms_link_button_title') }}
+    </HeaderLink>
+</template>
diff --git a/src/modules/menu/components/settings/ReportProblemButton.vue b/src/modules/menu/components/help/ReportProblemButton.vue
similarity index 98%
rename from src/modules/menu/components/settings/ReportProblemButton.vue
rename to src/modules/menu/components/help/ReportProblemButton.vue
index 62d9d5d8d..b8486746b 100644
--- a/src/modules/menu/components/settings/ReportProblemButton.vue
+++ b/src/modules/menu/components/help/ReportProblemButton.vue
@@ -6,7 +6,7 @@ import { useStore } from 'vuex'
 import sendFeedback, { ATTACHMENT_MAX_SIZE, KML_MAX_SIZE } from '@/api/feedback.api'
 import { createShortLink } from '@/api/shortlink.api'
 import HeaderLink from '@/modules/menu/components/header/HeaderLink.vue'
-import SendActionButtons from '@/modules/menu/components/settings/common/SendActionButtons.vue'
+import SendActionButtons from '@/modules/menu/components/help/common/SendActionButtons.vue'
 import EmailInput from '@/utils/components/EmailInput.vue'
 import FileInput from '@/utils/components/FileInput.vue'
 import SimpleWindow from '@/utils/components/SimpleWindow.vue'
@@ -174,12 +174,13 @@ function toggleDrawingOverlay() {
     <HeaderLink
         v-if="props.showAsLink"
         primary
+        small
         data-cy="report-problem-link-button"
         @click="openForm"
     >
         <strong>{{ i18n.t('problem_announcement') }}</strong>
     </HeaderLink>
-    <button v-else class="btn btn-primary m-1" data-cy="report-problem-button" @click="openForm">
+    <button v-else class="btn btn-primary" data-cy="report-problem-button" @click="openForm">
         {{ i18n.t('problem_announcement') }}
     </button>
     <SimpleWindow
diff --git a/src/modules/menu/components/settings/common/SendActionButtons.vue b/src/modules/menu/components/help/common/SendActionButtons.vue
similarity index 100%
rename from src/modules/menu/components/settings/common/SendActionButtons.vue
rename to src/modules/menu/components/help/common/SendActionButtons.vue
diff --git a/src/modules/menu/components/settings/feedback/FeedbackButton.vue b/src/modules/menu/components/help/feedback/FeedbackButton.vue
similarity index 95%
rename from src/modules/menu/components/settings/feedback/FeedbackButton.vue
rename to src/modules/menu/components/help/feedback/FeedbackButton.vue
index efcb7aacf..cdbecbab5 100644
--- a/src/modules/menu/components/settings/feedback/FeedbackButton.vue
+++ b/src/modules/menu/components/help/feedback/FeedbackButton.vue
@@ -5,8 +5,8 @@ import { useStore } from 'vuex'
 
 import sendFeedbackApi from '@/api/feedback.api'
 import HeaderLink from '@/modules/menu/components/header/HeaderLink.vue'
-import SendActionButtons from '@/modules/menu/components/settings/common/SendActionButtons.vue'
-import FeedbackRating from '@/modules/menu/components/settings/feedback/FeedbackRating.vue'
+import SendActionButtons from '@/modules/menu/components/help/common/SendActionButtons.vue'
+import FeedbackRating from '@/modules/menu/components/help/feedback/FeedbackRating.vue'
 import EmailInput from '@/utils/components/EmailInput.vue'
 import SimpleWindow from '@/utils/components/SimpleWindow.vue'
 import TextAreaInput from '@/utils/components/TextAreaInput.vue'
@@ -109,10 +109,10 @@ function onEmailValidate(valid) {
 </script>
 
 <template>
-    <HeaderLink v-if="showAsLink" primary data-cy="feedback-link-button" @click="openForm">
+    <HeaderLink v-if="showAsLink" primary data-cy="feedback-link-button" small @click="openForm">
         <strong>{{ i18n.t('test_map_give_feedback') }}</strong>
     </HeaderLink>
-    <button v-else class="btn btn-primary m-1" data-cy="feedback-button" @click="openForm">
+    <button v-else class="btn btn-primary" data-cy="feedback-button" @click="openForm">
         {{ i18n.t('test_map_give_feedback') }}
     </button>
     <SimpleWindow
diff --git a/src/modules/menu/components/settings/feedback/FeedbackRating.vue b/src/modules/menu/components/help/feedback/FeedbackRating.vue
similarity index 100%
rename from src/modules/menu/components/settings/feedback/FeedbackRating.vue
rename to src/modules/menu/components/help/feedback/FeedbackRating.vue
diff --git a/src/modules/menu/components/menu/MenuTray.vue b/src/modules/menu/components/menu/MenuTray.vue
index 585a4c305..fcfae6ab3 100644
--- a/src/modules/menu/components/menu/MenuTray.vue
+++ b/src/modules/menu/components/menu/MenuTray.vue
@@ -6,9 +6,9 @@ import { useStore } from 'vuex'
 import MenuThreeD from '@/modules/menu/components/3d/MenuThreeD.vue'
 import MenuActiveLayersList from '@/modules/menu/components/activeLayers/MenuActiveLayersList.vue'
 import MenuAdvancedToolsList from '@/modules/menu/components/advancedTools/MenuAdvancedToolsList.vue'
+import MenuHelpSection from '@/modules/menu/components/help/MenuHelpSection.vue'
 import MenuSection from '@/modules/menu/components/menu/MenuSection.vue'
 import MenuPrintSection from '@/modules/menu/components/print/MenuPrintSection.vue'
-import MenuSettings from '@/modules/menu/components/settings/MenuSettings.vue'
 import MenuShareSection from '@/modules/menu/components/share/MenuShareSection.vue'
 import MenuTopicSection from '@/modules/menu/components/topics/MenuTopicSection.vue'
 
@@ -32,7 +32,7 @@ const multiMenuSections = ref(['topicsSection', 'activeLayersSection', '3dSectio
 // sections and would therefore toggle other sections automatically.
 const singleModeSections = ref([
     'drawSection',
-    'settingsSection',
+    'helpSection',
     'shareSection',
     'toolsSection',
     'printSection',
@@ -91,18 +91,11 @@ function addRefBySectionId(el) {
 
 <template>
     <div data-cy="menu-tray-inner" :class="[{ 'menu-tray-compact': compact }, 'menu-tray-inner']">
-        <MenuSection
-            id="settingsSection"
-            :ref="addRefById"
-            class="settings-section"
-            :title="i18n.t('settings')"
-            :show-content="false"
-            secondary
-            data-cy="menu-settings-section"
+        <MenuHelpSection
+            :ref="addRefBySectionId"
+            class="d-lg-none help-section"
             @open-menu-section="onOpenMenuSection"
-        >
-            <MenuSettings />
-        </MenuSection>
+        />
         <MenuShareSection
             :ref="addRefBySectionId"
             :compact="compact"
@@ -196,8 +189,8 @@ function addRefBySectionId(el) {
 }
 
 @include respond-above(lg) {
-    .settings-section {
-        // See HeaderWithSearch.vue css where the settings-section is enable below lg
+    .help-section {
+        // See HeaderWithSearch.vue css where the help-section is enable below lg
         display: none;
     }
 }
diff --git a/src/modules/menu/components/print/MenuPrintSection.vue b/src/modules/menu/components/print/MenuPrintSection.vue
index a7353202c..27e260487 100644
--- a/src/modules/menu/components/print/MenuPrintSection.vue
+++ b/src/modules/menu/components/print/MenuPrintSection.vue
@@ -17,7 +17,7 @@ const dispatcher = { dispatcher: 'MapPrintSection.vue' }
 
 const emits = defineEmits(['openMenuSection'])
 
-const sectionId = ref('printSection')
+const sectionId = 'printSection'
 const isSectionShown = ref(false)
 const printGrid = ref(false)
 const printLegend = ref(false)
diff --git a/src/modules/menu/components/settings/LinksToolbar.vue b/src/modules/menu/components/settings/LinksToolbar.vue
deleted file mode 100644
index 542150b10..000000000
--- a/src/modules/menu/components/settings/LinksToolbar.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup>
-import { computed } from 'vue'
-import { useStore } from 'vuex'
-
-import FeedbackButton from '@/modules/menu/components/settings/feedback/FeedbackButton.vue'
-import HelpLink from '@/modules/menu/components/settings/HelpLink.vue'
-import MoreInfo from '@/modules/menu/components/settings/MoreInfo.vue'
-import ReportProblemButton from '@/modules/menu/components/settings/ReportProblemButton.vue'
-
-const props = defineProps({
-    showAsLinks: {
-        type: Boolean,
-        default: false,
-    },
-})
-
-const store = useStore()
-
-// Computed properties
-const hasGiveFeedbackButton = computed(() => store.getters.hasGiveFeedbackButton)
-const hasReportProblemButton = computed(() => store.getters.hasReportProblemButton)
-</script>
-
-<template>
-    <div
-        :class="{
-            container: !props.showAsLinks,
-            'me-2': props.showAsLinks,
-        }"
-    >
-        <FeedbackButton v-if="hasGiveFeedbackButton" :show-as-link="showAsLinks" />
-        <ReportProblemButton v-if="hasReportProblemButton" :show-as-link="showAsLinks" />
-        <MoreInfo :show-as-link="showAsLinks" />
-        <HelpLink :show-as-link="showAsLinks" />
-    </div>
-</template>
diff --git a/src/modules/menu/components/settings/MenuSettings.vue b/src/modules/menu/components/settings/MenuSettings.vue
deleted file mode 100644
index 748a392b4..000000000
--- a/src/modules/menu/components/settings/MenuSettings.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup>
-import LangSwitchToolbar from '@/modules/i18n/components/LangSwitchToolbar.vue'
-import LinksToolbar from '@/modules/menu/components/settings/LinksToolbar.vue'
-</script>
-
-<template>
-    <div id="menu-settings" class="pb-1 text-center" data-cy="menu-settings-content">
-        <div id="menu-lang-selector">
-            <LangSwitchToolbar />
-        </div>
-        <div id="menu-links">
-            <LinksToolbar />
-        </div>
-    </div>
-</template>
diff --git a/src/modules/menu/components/settings/MoreInfo.vue b/src/modules/menu/components/settings/MoreInfo.vue
deleted file mode 100644
index 2dd9a042d..000000000
--- a/src/modules/menu/components/settings/MoreInfo.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup>
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useStore } from 'vuex'
-
-import HeaderLink from '@/modules/menu/components/header/HeaderLink.vue'
-
-const store = useStore()
-const i18n = useI18n()
-
-const isDesktopMode = computed(() => store.getters.isDesktopMode)
-const cmsUrl = computed(() => i18n.t('cms_link_button_url'))
-
-function openCmsLink() {
-    window.open(cmsUrl.value, '_blank', 'noreferrer')
-}
-</script>
-
-<template>
-    <HeaderLink v-if="isDesktopMode" @click="openCmsLink">
-        {{ i18n.t('cms_link_button_title') }}
-    </HeaderLink>
-    <button v-else class="btn btn-light m-1" @click="openCmsLink">
-        {{ i18n.t('cms_link_button_title') }}
-    </button>
-</template>
diff --git a/src/scss/webmapviewer-bootstrap-theme.scss b/src/scss/webmapviewer-bootstrap-theme.scss
index e83802db8..5b1107d1b 100644
--- a/src/scss/webmapviewer-bootstrap-theme.scss
+++ b/src/scss/webmapviewer-bootstrap-theme.scss
@@ -66,3 +66,10 @@ $nav-tabs-link-active-bg: $primary;
 .w-13 {
     width: 13%;
 }
+
+.justify-content-stretch {
+    & > * {
+        justify-content: stretch;
+        width: 100%;
+    }
+}
\ No newline at end of file
diff --git a/src/modules/map/components/footer/MapFooterAppVersion.vue b/src/utils/components/AppVersion.vue
similarity index 100%
rename from src/modules/map/components/footer/MapFooterAppVersion.vue
rename to src/utils/components/AppVersion.vue
diff --git a/src/views/MapView.vue b/src/views/MapView.vue
index c0db3d3e5..258f3a1f3 100644
--- a/src/views/MapView.vue
+++ b/src/views/MapView.vue
@@ -8,7 +8,6 @@ import CesiumMouseTracker from '@/modules/map/components/cesium/CesiumMouseTrack
 import BackgroundSelector from '@/modules/map/components/footer/backgroundSelector/BackgroundSelector.vue'
 import MapFooter from '@/modules/map/components/footer/MapFooter.vue'
 import MapFooterAppCopyright from '@/modules/map/components/footer/MapFooterAppCopyright.vue'
-import MapFooterAppVersion from '@/modules/map/components/footer/MapFooterAppVersion.vue'
 import MapFooterAttributionList from '@/modules/map/components/footer/MapFooterAttributionList.vue'
 import OpenLayersMouseTracker from '@/modules/map/components/openlayers/OpenLayersMouseTracker.vue'
 import OpenLayersScale from '@/modules/map/components/openlayers/OpenLayersScale.vue'
@@ -17,6 +16,7 @@ import TimeSliderButton from '@/modules/map/components/toolbox/TimeSliderButton.
 import MapModule from '@/modules/map/MapModule.vue'
 import MenuModule from '@/modules/menu/MenuModule.vue'
 import { UIModes } from '@/store/modules/ui.store'
+import AppVersion from '@/utils/components/AppVersion.vue'
 import DragDropOverlay from '@/utils/components/DragDropOverlay.vue'
 import LoadingBar from '@/utils/components/LoadingBar.vue'
 import log from '@/utils/logging'
@@ -90,7 +90,7 @@ onMounted(() => {
                         </template>
                     </template>
                     <template v-if="!isPhoneMode" #bottom-right>
-                        <MapFooterAppVersion />
+                        <AppVersion />
                         <MapFooterAppCopyright />
                     </template>
                 </MapFooter>
diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js
index 6b6f4453a..70b299460 100644
--- a/tests/cypress/support/commands.js
+++ b/tests/cypress/support/commands.js
@@ -561,17 +561,17 @@ Cypress.Commands.add(
  * @param {string} lang Language to click; de, fr, it, en or rm
  */
 Cypress.Commands.add('clickOnLanguage', (lang) => {
-    let menuSection = null
     if (isMobile()) {
-        // mobile/tablet : clicking on the menu button first
-        menuSection = cy.get('[data-cy="menu-settings-section"]')
-        menuSection.click()
+        cy.readStoreValue('state.ui.showMenu').then((isMenuCurrentlyOpen) => {
+            if (!isMenuCurrentlyOpen) {
+                cy.get('[data-cy="menu-button"]').click()
+            }
+        })
+        cy.get('[data-cy="mobile-lang-selector"]').select(lang)
     } else {
         // desktop
-        menuSection = cy.get('[data-cy="header-settings-section"]')
+        cy.get(`[data-cy="menu-lang-${lang}"]`).click()
     }
-    menuSection.should('be.visible')
-    menuSection.find(`[data-cy="menu-lang-${lang}"]`).click()
 })
 
 // cypress-wait-until wrapper to wait for a specific store state.
diff --git a/tests/cypress/tests-e2e/feedback.cy.js b/tests/cypress/tests-e2e/feedback.cy.js
index 1b2010881..f7744982a 100644
--- a/tests/cypress/tests-e2e/feedback.cy.js
+++ b/tests/cypress/tests-e2e/feedback.cy.js
@@ -17,7 +17,7 @@ describe('Testing the feedback form', () => {
     it('test the report problem form UI, validations, and it backend interaction', () => {
         cy.goToMapView()
         cy.get('[data-cy="menu-button"]').click()
-        cy.get('[data-cy="menu-settings-section"]').click()
+        cy.get('[data-cy="menu-help-section"]').click()
 
         cy.log('The button should be in the header as a link on mobile')
         cy.get('[data-cy="feedback-button"]').should('be.visible').click()
diff --git a/tests/cypress/tests-e2e/header.cy.js b/tests/cypress/tests-e2e/header.cy.js
index bacb679b9..d7953cb55 100644
--- a/tests/cypress/tests-e2e/header.cy.js
+++ b/tests/cypress/tests-e2e/header.cy.js
@@ -4,9 +4,8 @@ import { BREAKPOINT_PHONE_WIDTH, BREAKPOINT_TABLET } from '@/config/responsive.c
 
 const backdropSelector = '[data-cy="black-backdrop"]'
 const menuButtonSelector = '[data-cy="menu-button"]'
-const menuSettingsContentSelector = '[data-cy="menu-settings-content"]'
-const menuSettingsSectionSelector =
-    '[data-cy="menu-settings-section"] [data-cy="menu-section-header"]'
+const menuSettingsContentSelector = '[data-cy="menu-help-content"]'
+const menuSettingsSectionSelector = '[data-cy="menu-help-section"] [data-cy="menu-section-header"]'
 
 describe('Test functions for the header / search bar', () => {
     beforeEach(() => {
@@ -52,7 +51,7 @@ describe('Test functions for the header / search bar', () => {
     }
 
     context('Settings Menu Section', () => {
-        it('shows/hide the settings on clicking on the settings section', () => {
+        it('shows/hide the help on clicking on the help section', () => {
             if (width < BREAKPOINT_TABLET) {
                 // mobile/tablet only
                 cy.get(menuButtonSelector).click()
diff --git a/tests/cypress/tests-e2e/layers.cy.js b/tests/cypress/tests-e2e/layers.cy.js
index 415235516..d8fef5876 100644
--- a/tests/cypress/tests-e2e/layers.cy.js
+++ b/tests/cypress/tests-e2e/layers.cy.js
@@ -960,22 +960,12 @@ describe('Test of layer handling', () => {
 
                 //---------------------------------------------------------------------------------
                 cy.log('keep timestamp configuration when the language changes')
-                cy.get('[data-cy="menu-settings-section"]:visible').should('be.visible').click()
-                cy.get('[data-cy="menu-lang-en"]:visible').should('have.class', 'btn-primary')
-                cy.get('[data-cy="menu-lang-fr"]:visible').should('be.visible').click()
-                cy.get('[data-cy="menu-lang-fr"]:visible').should('have.class', 'btn-primary')
+                cy.clickOnLanguage('fr')
                 cy.get('[data-cy="menu-active-layers"]:visible').should('be.visible').click()
                 cy.get('[data-cy="time-selector-test.timeenabled.wmts.layer-2"]:visible').contains(
                     '2016'
                 )
-                cy.get('[data-cy="menu-settings-section"] [data-cy="menu-section-header"]:visible')
-                    .should('be.visible')
-                    .click()
-                cy.get('[data-cy="menu-lang-en"]:visible').should('be.visible').click()
-                cy.get('[data-cy="menu-active-layers"]:visible').should('be.visible').click()
-                cy.get('[data-cy="menu-settings-section"] [data-cy="menu-section-body"]').should(
-                    'not.be.visible'
-                )
+                cy.clickOnLanguage('en')
 
                 //---------------------------------------------------------------------------------
                 cy.log(`duplicate time layer`)
diff --git a/tests/cypress/tests-e2e/menuTray.cy.js b/tests/cypress/tests-e2e/menuTray.cy.js
index 2bd3116ef..7c29d440b 100644
--- a/tests/cypress/tests-e2e/menuTray.cy.js
+++ b/tests/cypress/tests-e2e/menuTray.cy.js
@@ -6,8 +6,7 @@ const menuTopicHeaderSelector = menuTopicSectionSelector + ' > [data-cy="menu-se
 const menuActiveLayersSectionSelector = '[data-cy="menu-active-layers"]'
 const menuActiveLayersHeaderSelector =
     menuActiveLayersSectionSelector + ' > [data-cy="menu-section-header"]'
-const menuSettingsHeaderSelector =
-    '[data-cy="menu-settings-section"] > [data-cy="menu-section-header"]'
+const menuHelpSectionHeader = '[data-cy="menu-help-section"] > [data-cy="menu-section-header"]'
 const menuShareHeaderSelector = '[data-cy="menu-share-section"] > [data-cy="menu-section-header"]'
 
 function getFakeWMTSLayerCatalogEntry(id) {
@@ -114,7 +113,7 @@ function measureMenu(shouldHaveMaxSize) {
         if (shouldHaveMaxSize) {
             cy.get('@menuTrayBottom').should('be.equal', expectedMenuTrayBottom)
         } else {
-            cy.get('@menuTrayBottom').should('be.lt', expectedMenuTrayBottom)
+            cy.get('@menuTrayBottom').should('be.lte', expectedMenuTrayBottom)
         }
     })
 }
@@ -158,7 +157,7 @@ function checkOpenSections(openSections) {
     const sections = [
         { name: 'topics', selector: '[data-cy="menu-topic-tree"]' },
         { name: 'activeLayers', selector: '[data-cy="menu-section-active-layers"]' },
-        { name: 'settings', selector: '[data-cy="menu-settings-content"]' },
+        { name: 'help', selector: '[data-cy="menu-help-content"]' },
         {
             name: 'share',
             selector: '[data-cy="menu-share-section"] > [data-cy="menu-section-body"]',
@@ -235,9 +234,9 @@ describe('Test menu tray ui', () => {
         checkOpenSections(['activeLayers'])
         measureMenu(true)
 
-        cy.get(menuSettingsHeaderSelector).click()
+        cy.get(menuHelpSectionHeader).click()
         waitForAnimationsToFinish()
-        checkOpenSections(['settings'])
+        checkOpenSections(['help'])
         measureMenu(false)
 
         cy.get(menuShareHeaderSelector).click()
diff --git a/tests/cypress/tests-e2e/reportProblem.cy.js b/tests/cypress/tests-e2e/reportProblem.cy.js
index c1b1662b6..eef5ebac7 100644
--- a/tests/cypress/tests-e2e/reportProblem.cy.js
+++ b/tests/cypress/tests-e2e/reportProblem.cy.js
@@ -25,7 +25,7 @@ describe('Testing the report problem form', () => {
         interceptFeedback(false)
         cy.goToMapView()
         cy.get('[data-cy="menu-button"]').should('be.visible').click()
-        cy.get('[data-cy="menu-settings-section"]').should('be.visible').click()
+        cy.get('[data-cy="menu-help-section"]').should('be.visible').click()
 
         cy.log('The button should be in the header as a link on mobile')
         cy.get('[data-cy="report-problem-button"]').should('be.visible').click()
@@ -174,7 +174,7 @@ describe('Testing the report problem form', () => {
         interceptFeedback(true)
         if (isMobile()) {
             cy.get('[data-cy="menu-button"]').should('be.visible').click()
-            cy.get('[data-cy="menu-settings-section"]').should('be.visible').click()
+            cy.get('[data-cy="menu-help-section"]').should('be.visible').click()
         }
 
         cy.get('[data-cy="report-problem-button"]').should('be.visible').click()

From 50b316c9afeac01638980acf9662c07fc85d2588 Mon Sep 17 00:00:00 2001
From: Pascal Barth <pak.barth@gmail.com>
Date: Fri, 30 Aug 2024 08:56:28 +0200
Subject: [PATCH 3/3] PB-788 : add a little CSS trick to circumvent iOS Safari
 bug

select tags are insensitive to `text-align` prop on Safari, very old bug... So using another "technique" to have the text centered

removing/refactoring most component that were previously used in both instances but are now distinct flavors
---
 src/modules/menu/components/help/MenuHelpSection.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/modules/menu/components/help/MenuHelpSection.vue b/src/modules/menu/components/help/MenuHelpSection.vue
index 5eca132f4..ce5d85ced 100644
--- a/src/modules/menu/components/help/MenuHelpSection.vue
+++ b/src/modules/menu/components/help/MenuHelpSection.vue
@@ -140,6 +140,9 @@ defineExpose({
     top: 4px;
     width: 60px;
     text-align: center;
+    // for dumb Safari, bugs still there 14 years after
+    // https://bugs.webkit.org/show_bug.cgi?id=40216
+    text-align-last: center;
     border: 0;
     background: none;
     padding: 0;