From 501c6be22ad9f8152c6f766e531236c65236fa91 Mon Sep 17 00:00:00 2001
From: Niclas Edenvin <niclas.edenvin@scandichotels.com>
Date: Tue, 7 Jan 2025 12:52:23 +0000
Subject: [PATCH] Merged in fix/sw-1242-tripadvisor-not-clickable (pull request
 #1139)

fix(SW-1242): increase touch target of trip advisor icon

* fix(SW-1242): increase touch target of trip advisor icon


Approved-by: Pontus Dreij
---
 components/HotelReservation/TripAdvisorChip/index.tsx  |  9 ++++++---
 .../TripAdvisorChip/tripAdvisorChip.module.css         | 10 +++++++---
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/components/HotelReservation/TripAdvisorChip/index.tsx b/components/HotelReservation/TripAdvisorChip/index.tsx
index 05e03cd02..199a4f70b 100644
--- a/components/HotelReservation/TripAdvisorChip/index.tsx
+++ b/components/HotelReservation/TripAdvisorChip/index.tsx
@@ -7,9 +7,12 @@ import type { TripAdvisorProps } from "@/types/components/hotelReservation/tripA
 
 export default function TripAdvisorChip({ rating }: TripAdvisorProps) {
   return (
-    <div className={styles.tripAdvisor}>
-      <TripAdvisorIcon color="burgundy" />
-      <Caption color="burgundy">{rating}</Caption>
+    // Wrapping the chip in a transparent container with some padding to increase the touch target
+    <div className={styles.container}>
+      <div className={styles.tripAdvisor}>
+        <TripAdvisorIcon color="burgundy" />
+        <Caption color="burgundy">{rating}</Caption>
+      </div>
     </div>
   )
 }
diff --git a/components/HotelReservation/TripAdvisorChip/tripAdvisorChip.module.css b/components/HotelReservation/TripAdvisorChip/tripAdvisorChip.module.css
index a5328e1a3..c1901310e 100644
--- a/components/HotelReservation/TripAdvisorChip/tripAdvisorChip.module.css
+++ b/components/HotelReservation/TripAdvisorChip/tripAdvisorChip.module.css
@@ -1,11 +1,15 @@
+.container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: var(--Spacing-x2);
+}
+
 .tripAdvisor {
   display: flex;
   align-items: center;
   gap: var(--Spacing-x-half);
   background-color: var(--Base-Surface-Primary-light-Normal);
-  position: absolute;
-  left: 16px;
-  top: 16px;
   padding: var(--Spacing-x-quarter) var(--Spacing-x1);
   border-radius: var(--Corner-radius-Small);
 }