From 4cae756b5c2a3544675eb5eb011b9a90e003ae6b Mon Sep 17 00:00:00 2001
From: pacien
Date: Sat, 8 Feb 2020 18:13:22 +0100
Subject: viewer: ldcommand: fix command buttons active boxes

Properly centering icons in their boxes instead of having them sitting in a corner.
---
 viewer/src/components/LdCommand.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

(limited to 'viewer/src/components/LdCommand.vue')

diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 841d773..8257c1f 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -2,6 +2,7 @@
 --             pictures into a searchable web gallery.
 --
 -- Copyright (C) 2019-2020  Guillaume FOUET
+--               2020       Pacien TRAN-GIRARD
 --
 -- This program is free software: you can redistribute it and/or modify
 -- it under the terms of the GNU Affero General Public License as
@@ -63,12 +64,14 @@ export default class LdCommand extends Vue {
   justify-content: space-around;
   vertical-align: middle;
   align-items: center;
-  width: $layout-left;
+  flex: 0 0 $layout-left;
+
   > * {
-    // Unify the minor size differences between icons
-    width: 26px;
-    height: 26px;
-    margin-top: 2px;
+    // normalise icon active boxes
+    width: $layout-top;
+    line-height: $layout-top;
+    text-align: center;
+    vertical-align: middle;
   }
 }
 </style>
-- 
cgit v1.2.3