From e448f908e354cdc2fcda48a40ed35b3fdb3695b9 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Wed, 5 May 2021 22:08:58 -0700
Subject: [PATCH] Fix CSS extraneous space beneath icons

---
 client/web/src/components/panels/Document.vue        |  4 ----
 client/web/src/components/widgets/DropdownButton.vue |  1 +
 client/web/src/components/widgets/IconButton.vue     | 12 +++++-------
 client/web/src/components/widgets/IconContainer.vue  | 11 ++---------
 client/web/src/components/widgets/NumberInput.vue    |  2 +-
 client/web/src/components/widgets/RadioPicker.vue    |  2 --
 client/web/src/components/widgets/ShelfItem.vue      |  2 +-
 .../src/components/window/footer-bar/InputHint.vue   |  6 ++++--
 8 files changed, 14 insertions(+), 26 deletions(-)

diff --git a/client/web/src/components/panels/Document.vue b/client/web/src/components/panels/Document.vue
index 626621074..4c9887c71 100644
--- a/client/web/src/components/panels/Document.vue
+++ b/client/web/src/components/panels/Document.vue
@@ -153,10 +153,6 @@
 					margin-bottom: -8px;
 				}
 			}
-
-			.swap-and-reset {
-				font-size: 0;
-			}
 		}
 
 		.viewport {
diff --git a/client/web/src/components/widgets/DropdownButton.vue b/client/web/src/components/widgets/DropdownButton.vue
index 67073235c..9dfb6159c 100644
--- a/client/web/src/components/widgets/DropdownButton.vue
+++ b/client/web/src/components/widgets/DropdownButton.vue
@@ -13,6 +13,7 @@
 	outline: none;
 	border: none;
 	border-radius: 2px;
+	vertical-align: top;
 	background: #111;
 	fill: #ddd;
 
diff --git a/client/web/src/components/widgets/IconButton.vue b/client/web/src/components/widgets/IconButton.vue
index 4bf0cbb6f..5eba19a14 100644
--- a/client/web/src/components/widgets/IconButton.vue
+++ b/client/web/src/components/widgets/IconButton.vue
@@ -8,17 +8,15 @@
 .icon-button {
 	display: inline-block;
 	flex: 0 0 auto;
+	padding: 0;
 	outline: none;
 	border: none;
-	padding: 0;
+	border-radius: 2px;
+	background: none;
+	vertical-align: top;
+	fill: #ddd;
 	width: 16px;
 	height: 16px;
-	background: none;
-	font-weight: bold;
-	font-size: 10px;
-	border-radius: 2px;
-	color: #ddd;
-	fill: #ddd;
 
 	&:not(.gap-after) + .icon-button {
 		margin-left: 0;
diff --git a/client/web/src/components/widgets/IconContainer.vue b/client/web/src/components/widgets/IconContainer.vue
index d3eb4d7f2..1fc972b99 100644
--- a/client/web/src/components/widgets/IconContainer.vue
+++ b/client/web/src/components/widgets/IconContainer.vue
@@ -8,17 +8,10 @@
 .icon-container {
 	display: inline-block;
 	flex: 0 0 auto;
-	outline: none;
-	border: none;
-	padding: 0;
+	fill: #ddd;
+	vertical-align: top;
 	width: 16px;
 	height: 16px;
-	background: none;
-	font-weight: bold;
-	font-size: 10px;
-	border-radius: 2px;
-	color: #ddd;
-	fill: #ddd;
 
 	&:not(.gap-after) + .icon-container {
 		margin-left: 0;
diff --git a/client/web/src/components/widgets/NumberInput.vue b/client/web/src/components/widgets/NumberInput.vue
index 676c9a42c..7acbb4e89 100644
--- a/client/web/src/components/widgets/NumberInput.vue
+++ b/client/web/src/components/widgets/NumberInput.vue
@@ -24,7 +24,7 @@
 		padding: 0;
 		line-height: 22px;
 		color: #ddd;
-		font-size: 14px;
+		font-size: inherit;
 		text-align: center;
 		font-family: inherit;
 
diff --git a/client/web/src/components/widgets/RadioPicker.vue b/client/web/src/components/widgets/RadioPicker.vue
index 0a08e47a3..2cc3337d5 100644
--- a/client/web/src/components/widgets/RadioPicker.vue
+++ b/client/web/src/components/widgets/RadioPicker.vue
@@ -6,8 +6,6 @@
 
 <style lang="scss">
 .radio-picker {
-	font-size: 0;
-
 	button {
 		fill: #ddd;
 		border-radius: 0;
diff --git a/client/web/src/components/widgets/ShelfItem.vue b/client/web/src/components/widgets/ShelfItem.vue
index 13fd81da2..acf48e878 100644
--- a/client/web/src/components/widgets/ShelfItem.vue
+++ b/client/web/src/components/widgets/ShelfItem.vue
@@ -8,7 +8,6 @@
 .shelf-item {
 	padding: 4px;
 	border-radius: 2px;
-	font-size: 0;
 
 	&:hover {
 		background: #666;
@@ -21,6 +20,7 @@
 	svg {
 		width: 24px;
 		height: 24px;
+		vertical-align: top;
 	}
 }
 </style>
diff --git a/client/web/src/components/window/footer-bar/InputHint.vue b/client/web/src/components/window/footer-bar/InputHint.vue
index c0aaac5cc..3352cd7dd 100644
--- a/client/web/src/components/window/footer-bar/InputHint.vue
+++ b/client/web/src/components/window/footer-bar/InputHint.vue
@@ -70,8 +70,6 @@
 	}
 
 	.input-mouse {
-		font-size: 0;
-
 		.bright {
 			fill: #ddd;
 		}
@@ -79,6 +77,10 @@
 		.dim {
 			fill: #888;
 		}
+
+		svg {
+			vertical-align: top;
+		}
 	}
 }
 </style>