From b105ab6f9d7f220cc07a0f7da81d2f9544e1feb3 Mon Sep 17 00:00:00 2001
From: Toni Kangas <kangasta@users.noreply.github.com>
Date: Wed, 29 May 2024 02:08:03 +0300
Subject: [PATCH] Reserve space for icon button hover effect (#121)

---
 src/components/Menu/IconButton.svelte | 53 +++++++++++++++------------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/components/Menu/IconButton.svelte b/src/components/Menu/IconButton.svelte
index 7dcff64..b4fec70 100644
--- a/src/components/Menu/IconButton.svelte
+++ b/src/components/Menu/IconButton.svelte
@@ -30,40 +30,47 @@
 <!-- The <div> element has a child <button> element that handles keyboard interaction -->
 <!-- svelte-ignore a11y-no-static-element-interactions a11y-click-events-have-key-events -->
 <div on:click={onClick} class="icon-button clickable">
-  <button
-    aria-labelledby={labelId}
-    class="clickable"
-    class:open
-    on:click={onClick}
-  >
-    <svg viewBox="0 0 16 16">
-      <path
-        fill="none"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="1"
-        d={icons[icon].path}
-      />
-    </svg>
-  </button>
-  <div class="label" id={labelId}>{label}</div>
+  <div class="content">
+    <button
+      aria-labelledby={labelId}
+      class="clickable"
+      class:open
+      on:click={onClick}
+    >
+      <svg viewBox="0 0 16 16">
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1"
+          d={icons[icon].path}
+        />
+      </svg>
+    </button>
+    <div class="label" id={labelId}>{label}</div>
+  </div>
 </div>
 
 <style lang="sass">
   div.icon-button
     display: inline-flex
     flex-direction: column
-    align-items: center
-
-    transition: transform 125ms
+    justify-content: center
+    height: 4.5626rem
 
-    &:hover
-      transform: scale(1.1) translateY(-0.05em)
+    &:hover .content
+      transform: scale(1.1) translateY(-0.15rem)
 
     &:active svg
       transform: translateY(0.15rem)
 
+  div.content
+    display: inline-flex
+    flex-direction: column
+    align-items: center
+    transition: transform 125ms
+
   .clickable
     cursor: pointer