From e9e92b68f70c7e083ca4ce1037a44080439a7909 Mon Sep 17 00:00:00 2001
From: nicoMaz <139277771+nicomaz@users.noreply.github.com>
Date: Wed, 1 May 2024 17:30:44 +0100
Subject: [PATCH 1/3] fix: update button based on screen size

---
 frontend/pages/events/[id]/about.vue | 36 +++++++++-------------------
 1 file changed, 11 insertions(+), 25 deletions(-)

diff --git a/frontend/pages/events/[id]/about.vue b/frontend/pages/events/[id]/about.vue
index cb8ecb67a..893473709 100644
--- a/frontend/pages/events/[id]/about.vue
+++ b/frontend/pages/events/[id]/about.vue
@@ -67,10 +67,7 @@
           :event="event"
         />
         <MediaMap
-          v-if="
-            (event.offlineLocation && !textExpanded) ||
-            (event.offlineLocation && isUnderLargeBP)
-          "
+          v-if="event.offlineLocation && !textExpanded"
           class="h-[17.5rem] w-full"
           :markerColors="event.type === 'learn' ? ['#2176AE'] : ['#BA3D3B']"
           :eventNames="[event.name]"
@@ -102,12 +99,13 @@ const expandReduceText = () => {
   textExpanded.value = !textExpanded.value;
 };
 
-const currentWidth = ref(window.innerWidth);
-let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
+const windowWidth = ref(window.innerWidth);
+
 const shareButtonLabel = ref("");
 
 function updateShareBtnLabel() {
-  if (currentWidth.value < Breakpoint.SMALL) {
+  windowWidth.value = window.innerWidth;
+  if (windowWidth.value < Breakpoint.SMALL) {
     shareButtonLabel.value = "components.btn-action.share";
   } else {
     shareButtonLabel.value = "components._global.share-group";
@@ -115,28 +113,16 @@ function updateShareBtnLabel() {
 }
 
 onMounted(() => {
-  window.addEventListener("resize", handleResize);
+  window.addEventListener("resize", updateShareBtnLabel);
   updateShareBtnLabel();
 });
 
-const isUnderLargeBP = ref(false);
-
-const checkUnderLargeBP = () => {
-  isUnderLargeBP.value = window.innerWidth < 1024;
-};
-
-const handleResize = () => {
-  checkUnderLargeBP();
-
-  if (resizeTimeout) {
-    clearTimeout(resizeTimeout);
-  }
-  resizeTimeout = setTimeout(updateShareBtnLabel, 100);
-};
+onUpdated(() => {
+  updateShareBtnLabel();
+});
 
-onMounted(() => {
-  window.addEventListener("resize", handleResize);
-  handleResize(); // initial check
+onUnmounted(() => {
+  window.removeEventListener("resize", updateShareBtnLabel);
 });
 
 const modalIsOpen = ref(false);

From 1b69b77d7ec6b58c9b0432ac9b3fe0de7e6c0dcd Mon Sep 17 00:00:00 2001
From: nicoMaz <139277771+nicomaz@users.noreply.github.com>
Date: Wed, 1 May 2024 17:40:52 +0100
Subject: [PATCH 2/3] fix: update button based on screen size

---
 .../organizations/[id]/groups/[id]/about.vue  | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/frontend/pages/organizations/[id]/groups/[id]/about.vue b/frontend/pages/organizations/[id]/groups/[id]/about.vue
index 52e1296b3..28f6ad770 100644
--- a/frontend/pages/organizations/[id]/groups/[id]/about.vue
+++ b/frontend/pages/organizations/[id]/groups/[id]/about.vue
@@ -101,30 +101,31 @@ const expandReduceText = () => {
   textExpanded.value = !textExpanded.value;
 };
 
-const currentWidth = ref(window.innerWidth);
-let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
+const windowWidth = ref(window.innerWidth);
 const shareButtonLabel = ref("");
 
 function updateShareBtnLabel() {
-  if (currentWidth.value < Breakpoint.SMALL) {
+  windowWidth.value = window.innerWidth;
+  if (windowWidth.value < Breakpoint.SMALL) {
     shareButtonLabel.value = "components.btn-action.share";
   } else {
     shareButtonLabel.value = "components._global.share-group";
   }
 }
 
-const handleResize = () => {
-  if (resizeTimeout) {
-    clearTimeout(resizeTimeout);
-  }
-  resizeTimeout = setTimeout(updateShareBtnLabel, 100);
-};
-
 onMounted(() => {
-  window.addEventListener("resize", handleResize);
+  window.addEventListener("resize", updateShareBtnLabel);
+  updateShareBtnLabel();
+});
+
+onUpdated(() => {
   updateShareBtnLabel();
 });
 
+onUnmounted(() => {
+  window.removeEventListener("resize", updateShareBtnLabel);
+});
+
 const modalIsOpen = ref(false);
 
 function openModal() {

From 31e4e2b1373b35765a6b1592cf46709d0fa19540 Mon Sep 17 00:00:00 2001
From: nicoMaz <139277771+nicomaz@users.noreply.github.com>
Date: Wed, 1 May 2024 17:41:07 +0100
Subject: [PATCH 3/3] fix: update button based on screen size

---
 frontend/pages/organizations/[id]/about.vue | 23 +++++++++++----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/frontend/pages/organizations/[id]/about.vue b/frontend/pages/organizations/[id]/about.vue
index 5a4426633..0a875f3c4 100644
--- a/frontend/pages/organizations/[id]/about.vue
+++ b/frontend/pages/organizations/[id]/about.vue
@@ -124,30 +124,31 @@ const expandReduceText = () => {
   textExpanded.value = !textExpanded.value;
 };
 
-const currentWidth = ref(window.innerWidth);
-let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
+const windowWidth = ref(window.innerWidth);
 const shareButtonLabel = ref("");
 
 function updateShareBtnLabel() {
-  if (currentWidth.value < Breakpoint.SMALL) {
+  windowWidth.value = window.innerWidth;
+  if (windowWidth.value < Breakpoint.SMALL) {
     shareButtonLabel.value = "components.btn-action.share";
   } else {
     shareButtonLabel.value = "components._global.share-organization";
   }
 }
 
-const handleResize = () => {
-  if (resizeTimeout) {
-    clearTimeout(resizeTimeout);
-  }
-  resizeTimeout = setTimeout(updateShareBtnLabel, 100);
-};
-
 onMounted(() => {
-  window.addEventListener("resize", handleResize);
+  window.addEventListener("resize", updateShareBtnLabel);
+  updateShareBtnLabel();
+});
+
+onUpdated(() => {
   updateShareBtnLabel();
 });
 
+onUnmounted(() => {
+  window.removeEventListener("resize", updateShareBtnLabel);
+});
+
 // TODO: for testing purpose, should be removed.
 // const upVotes = ref(123);
 // const downVotes = ref(123);