From 9da2f8b7406d90efe251fdeb3c7d1de898b60d0a Mon Sep 17 00:00:00 2001
From: Noa Rave <noa.rave@wikimedia.de>
Date: Mon, 22 Jan 2024 15:39:34 +0100
Subject: [PATCH] Find a way around icon - text misalignment issue in codex
 buttons (#837)

* make text in all icon buttons its own span and style that

* remove padding as it worsens the issue on chrome

* Add explicit alignment to the icon as well

Co-authored-by: Guergana Tzatchkova <guergana.tzatchkova@wikimedia.de>

---------

Co-authored-by: Guergana Tzatchkova <guergana.tzatchkova@wikimedia.de>
---
 resources/js/Pages/Home.vue    | 4 ++--
 resources/js/Pages/Layout.vue  | 2 +-
 resources/js/Pages/Results.vue | 4 ++--
 resources/sass/app.scss        | 8 ++++++++
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Home.vue
index cbdfa310..b5fb5c99 100644
--- a/resources/js/Pages/Home.vue
+++ b/resources/js/Pages/Home.vue
@@ -11,7 +11,7 @@
                     @click="faqDialog = true"
                 >
                     <cdx-icon :icon="cdxIconInfo" />
-                    {{ $i18n('faq-button') }}
+                    <span class="text-with-icon-button">{{ $i18n('faq-button') }}</span>
                 </cdx-button>
             </header>
             <cdx-dialog id="faq-dialog"
@@ -74,7 +74,7 @@
                     :disabled="loading"
                 >
                     <cdx-icon :icon="cdxIconDie" />
-                    {{ $i18n('random-mismatches') }}
+                    <span class="text-with-icon-button">{{ $i18n('random-mismatches') }}</span>
                 </cdx-button>
             </div>
             <form id="items-form" @submit.prevent="send">
diff --git a/resources/js/Pages/Layout.vue b/resources/js/Pages/Layout.vue
index 64aa5340..3c7d19c0 100644
--- a/resources/js/Pages/Layout.vue
+++ b/resources/js/Pages/Layout.vue
@@ -10,7 +10,7 @@
                     <LanguageSelectorButton :aria-label="$i18n('toggle-language-selector-button')"
                         @click="onToggleLanguageSelector">
                         <cdx-icon :icon="cdxIconLanguage" />
-                        {{ currentLanguageAutonym }}
+                        <span class="text-with-icon-button">{{ currentLanguageAutonym }}</span>
                     </LanguageSelectorButton>
                     <LanguageSelector v-show="showLanguageSelector" ref="languageSelector"
                         @close="onCloseLanguageSelector" @select="onChangeLanguage">
diff --git a/resources/js/Pages/Results.vue b/resources/js/Pages/Results.vue
index a64b4b58..1492aaf6 100644
--- a/resources/js/Pages/Results.vue
+++ b/resources/js/Pages/Results.vue
@@ -4,7 +4,7 @@
         <inertia-head title="Mismatch Finder - Results" />
         <cdx-button class="back-button" @click="() => $inertia.get('/', {})">
             <cdx-icon :icon="cdxIconArrowPrevious" />
-            {{ $i18n('results-back-button') }}
+            <span class="text-with-icon-button">{{ $i18n('results-back-button') }}</span>
         </cdx-button>
         <section id="description-section">
             <header class="description-header">
@@ -16,7 +16,7 @@
                     @click="instructionsDialog = true"
                 >
                     <cdx-icon :icon="cdxIconInfo" />
-                    {{$i18n('results-instructions-button')}}
+                    <span class="text-with-icon-button">{{$i18n('results-instructions-button')}}</span>
                 </cdx-button>
             </header>
 
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 4762de2e..25083b5c 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -348,6 +348,14 @@ dl.import-meta .download-csv {
 // is marked as resolved.
 .cdx-button {
     @include ui-text-M($font-weight-bold);
+
+    .text-with-icon-button {
+        vertical-align: text-top;
+        padding-left: 5px;
+    .cdx-icon {
+        vertical-align: text-top;
+    }
+  }
 }
 
 .svg {