From 39424a2b64a6d6897d892e213ea4cff6ea0e1f60 Mon Sep 17 00:00:00 2001
From: Arpad Csanyi <csarpad@gmail.com>
Date: Wed, 2 Mar 2016 22:27:43 +0100
Subject: [PATCH] Keymap tile formatting resolves #10.

Probably we will be able to use this "trick" in the final version as
well. Regarding the browser support it's quite good.
---
 app.css  | 6 ++++--
 app.html | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app.css b/app.css
index bf845247..e2b5f804 100644
--- a/app.css
+++ b/app.css
@@ -117,15 +117,17 @@ li {
 .keymap__name.active,
 .keymap__abbrev.active {
   box-shadow: 0 0 0px 1px #ccc, 0 0 5px 0px #ccc;
-  padding: 0 .5rem;
-  margin: 0 -.5rem;
+  border-color: transparent;
 }
 
 .keymap__name,
 .keymap__abbrev {
+  border: none;
   border-bottom: 2px dotted #999;
 }
 
+.keymap__name,
+.keymap__name.active,
 .keymap__abbrev,
 .keymap__abbrev.active {
   padding: 0 .5rem;
diff --git a/app.html b/app.html
index ff378eae..a4fdc576 100644
--- a/app.html
+++ b/app.html
@@ -28,7 +28,7 @@
         <div class="row">
           <h1 class="col-xs-12 pane-title">
             <i class="fa fa-keyboard-o"></i>
-            <span class="keymap__name">QWERTY</span> keymap (<span class="keymap__abbrev">QTY</span>)
+            <span class="keymap__name" contenteditable="true">QWERTY</span> keymap (<span class="keymap__abbrev" contenteditable="true">QTY</span>)
             <i class="fa fa-star-o fa-star keymap__is-default"></i>
           </h1>
         </div>