From 2ccc1bc4eba83a49c37213582fae5d9e7ee6fc98 Mon Sep 17 00:00:00 2001
From: Aram <37216945+alimpens@users.noreply.github.com>
Date: Mon, 26 Aug 2024 11:33:16 +0200
Subject: [PATCH] fix: Remove margin Safari sets on buttons (#1529)

Co-authored-by: Vincent Smedinga <v.smedinga@amsterdam.nl>
---
 packages/css/src/components/accordion/accordion.scss  | 11 ++++++++++-
 packages/css/src/components/button/button.scss        |  4 ++++
 packages/css/src/components/header/header.scss        |  1 +
 .../css/src/components/icon-button/icon-button.scss   |  4 ++++
 .../css/src/components/search-field/search-field.scss |  6 +++---
 packages/css/src/components/tabs/tabs.scss            |  4 ++++
 6 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/packages/css/src/components/accordion/accordion.scss b/packages/css/src/components/accordion/accordion.scss
index fb8cfd1560..5355c17281 100644
--- a/packages/css/src/components/accordion/accordion.scss
+++ b/packages/css/src/components/accordion/accordion.scss
@@ -19,9 +19,16 @@
   margin-inline: 0;
 }
 
+@mixin reset-button {
+  border: 0;
+  margin-block: 0; // [1]
+  margin-inline: 0; // [1]
+
+  // [1] Remove the margin in older Safari.
+}
+
 .ams-accordion__button {
   background-color: transparent;
-  border: 0;
   color: var(--ams-accordion-button-color);
   cursor: pointer;
   display: flex;
@@ -35,6 +42,8 @@
   padding-inline: var(--ams-accordion-button-padding-inline);
   text-align: start;
 
+  @include reset-button;
+
   &:focus {
     outline-offset: var(--ams-accordion-button-focus-outline-offset);
   }
diff --git a/packages/css/src/components/button/button.scss b/packages/css/src/components/button/button.scss
index 404b4882af..f77c6177b4 100644
--- a/packages/css/src/components/button/button.scss
+++ b/packages/css/src/components/button/button.scss
@@ -7,6 +7,10 @@
 
 @mixin reset-button {
   border: 0;
+  margin-block: 0; // [1]
+  margin-inline: 0; // [1]
+
+  // [1] Remove the margin in older Safari.
 }
 
 .ams-button {
diff --git a/packages/css/src/components/header/header.scss b/packages/css/src/components/header/header.scss
index 895c8e5298..1014dbb3a3 100644
--- a/packages/css/src/components/header/header.scss
+++ b/packages/css/src/components/header/header.scss
@@ -79,6 +79,7 @@
   font-weight: var(--ams-page-menu-item-font-weight);
   line-height: var(--ams-page-menu-item-line-height);
   margin-block: 0;
+  margin-inline: 0;
   padding-inline: 0 1.875rem;
   text-align: center;
   touch-action: manipulation;
diff --git a/packages/css/src/components/icon-button/icon-button.scss b/packages/css/src/components/icon-button/icon-button.scss
index 86b484dab7..9dafa19fb8 100644
--- a/packages/css/src/components/icon-button/icon-button.scss
+++ b/packages/css/src/components/icon-button/icon-button.scss
@@ -5,8 +5,12 @@
 
 @mixin reset {
   border: 0;
+  margin-block: 0; // [1]
+  margin-inline: 0; // [1]
   padding-block: 0;
   padding-inline: 0;
+
+  // [1] Remove the margin in older Safari.
 }
 
 .ams-icon-button {
diff --git a/packages/css/src/components/search-field/search-field.scss b/packages/css/src/components/search-field/search-field.scss
index c360f2425f..d914fb2ee1 100644
--- a/packages/css/src/components/search-field/search-field.scss
+++ b/packages/css/src/components/search-field/search-field.scss
@@ -71,10 +71,10 @@
 
 @mixin reset-button {
   border: 0;
+  margin-block: 0; // [1]
+  margin-inline: 0; // [1]
 
-  // Reset margins added by Safari on iOS
-  margin-block: 0;
-  margin-inline: 0;
+  // [1] Remove the margin in older Safari.
 }
 
 .ams-search-field__button {
diff --git a/packages/css/src/components/tabs/tabs.scss b/packages/css/src/components/tabs/tabs.scss
index 9e13233d15..4c51d07bf2 100644
--- a/packages/css/src/components/tabs/tabs.scss
+++ b/packages/css/src/components/tabs/tabs.scss
@@ -8,6 +8,10 @@
 @mixin reset-button {
   background-color: transparent;
   border: 0;
+  margin-block: 0; // [1]
+  margin-inline: 0; // [1]
+
+  // [1] Remove the margin in older Safari.
 }
 
 .ams-tabs {