From afa200009cdee7ca8929636111d4d0e6019e043a Mon Sep 17 00:00:00 2001
From: ChayanitBm <chayanit@amity.co>
Date: Fri, 20 Dec 2024 18:24:35 +0700
Subject: [PATCH] Release/v3.11.5 (#95)

* fix: top button overlap

* style: add pointer event desktop

* chore(release): 3.11.5

---------

Co-authored-by: bmo-amity-bot <developers@amity.co>
---
 CHANGELOG.md                                | 2 ++
 package.json                                | 2 +-
 src/core/components/ImageGallery/index.tsx  | 2 +-
 src/core/components/ImageGallery/styles.tsx | 6 +++++-
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cb48153b..637d68d8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### 3.11.5 (2024-12-20)
+
 ### 3.11.4 (2024-12-02)
 
 ### 3.11.4 (2024-12-02)
diff --git a/package.json b/package.json
index e04d2956..ad687737 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@amityco/ui-kit-open-source",
-  "version": "3.11.4",
+  "version": "3.11.5",
   "engines": {
     "node": ">=16",
     "pnpm": ">=8"
diff --git a/src/core/components/ImageGallery/index.tsx b/src/core/components/ImageGallery/index.tsx
index 8dbd889f..66ab4c53 100644
--- a/src/core/components/ImageGallery/index.tsx
+++ b/src/core/components/ImageGallery/index.tsx
@@ -62,8 +62,8 @@ const ImageGallery = <T extends Amity.Post>({
 
   return (
     <Container>
+      <Frame>{renderItem(items[index])}</Frame>
       <InnerContainer>
-        <Frame>{renderItem(items[index])}</Frame>
         <GridContainer>
           {showCounter && <Counter>{`${index + 1} / ${items.length}`}</Counter>}
 
diff --git a/src/core/components/ImageGallery/styles.tsx b/src/core/components/ImageGallery/styles.tsx
index a00999bf..86516a63 100644
--- a/src/core/components/ImageGallery/styles.tsx
+++ b/src/core/components/ImageGallery/styles.tsx
@@ -41,6 +41,7 @@ export const InnerContainer = styled.div`
   width: 100%;
   height: 100%;
   position: relative;
+  pointer-events: none;
 `;
 
 export const GridContainer = styled.div`
@@ -55,7 +56,7 @@ export const GridContainer = styled.div`
     'left image right';
 
   width: 100%;
-  height: 100%;
+  height: 90%;
 
   padding: 2rem 1rem 2rem 1rem;
 
@@ -85,6 +86,7 @@ export const Frame = styled.div`
   left: 0;
 
   @media (min-width: 768px) {
+    pointer-events: auto;
     position: unset;
     top: unset;
     left: unset;
@@ -109,6 +111,7 @@ const InvisibleButton = styled.button`
   cursor: pointer;
   font-size: 24px;
   color: inherit;
+  pointer-events: auto;
 
   &:hover {
     color: ${({ theme }) => theme.palette.neutral.shade4};
@@ -143,4 +146,5 @@ export const CloseButton = styled(BaseCloseButton)`
   display: flex;
   align-items: center;
   justify-content: center;
+  pointer-events: auto;
 `;