From d207d4934778e26d597eba85cd940139c34a1e1c Mon Sep 17 00:00:00 2001
From: Aleksander Machniak <machniak@kolabsys.com>
Date: Sat, 27 May 2017 09:42:41 +0200
Subject: [PATCH] Fix compose form layout

---
 skins/elastic/styles/layout.less           |  1 -
 skins/elastic/styles/widgets/messages.less |  4 ++
 skins/elastic/templates/compose.html       | 48 ++++++++++++++--------
 3 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/skins/elastic/styles/layout.less b/skins/elastic/styles/layout.less
index 3ff4fba1f..33056a65f 100644
--- a/skins/elastic/styles/layout.less
+++ b/skins/elastic/styles/layout.less
@@ -51,7 +51,6 @@ html {
 }
 
 body {
-    line-height: 1;
     min-width: @page-min-width;
     height: 100%;
     overflow: hidden;
diff --git a/skins/elastic/styles/widgets/messages.less b/skins/elastic/styles/widgets/messages.less
index 8b42704cb..3b69ab0ad 100644
--- a/skins/elastic/styles/widgets/messages.less
+++ b/skins/elastic/styles/widgets/messages.less
@@ -56,6 +56,10 @@
     width: 100%;
     padding: 0.75em;
 
+    & > i.icon {
+        line-height: 1;
+    }
+
     & > i.icon:before {
         &:extend(.font-icon-class);
         content: @fa-var-info-circle;
diff --git a/skins/elastic/templates/compose.html b/skins/elastic/templates/compose.html
index 54e900173..372d3de5b 100644
--- a/skins/elastic/templates/compose.html
+++ b/skins/elastic/templates/compose.html
@@ -147,44 +147,56 @@
 			<div class="compose-headers">
 				<div id="compose_from" class="form-group row">
 					<label for="_from" class="col-2 col-form-label"><roundcube:label name="from" /></label>
-					<div class="input-group col-10">
-						<roundcube:object name="composeHeaders" part="from" id="_from" form="form" tabindex="1" class="form-control" />
-						<a href="#identities" onclick="return rcmail.command('identities')" class="input-group-addon icon edit" title="<roundcube:label name="editidents" />" tabindex="1"><span class="inner"><roundcube:label name="editidents" /></span></a>
+					<div class="col-10">
+						<div class="input-group">
+							<roundcube:object name="composeHeaders" part="from" id="_from" form="form" tabindex="1" class="form-control" />
+							<a href="#identities" onclick="return rcmail.command('identities')" class="input-group-addon icon edit" title="<roundcube:label name="editidents" />" tabindex="1"><span class="inner"><roundcube:label name="editidents" /></span></a>
+						</div>
 					</div>
 				</div>
 				<div id="compose_to" class="form-group row">
 					<label for="_to" class="col-2 col-form-label"><roundcube:label name="to" /></label>
-					<div class="input-group col-10">
-						<roundcube:object name="composeHeaders" part="to" id="_to" form="form" tabindex="1" aria-required="true" data-recipient-input="true" />
-						<a href="#add-header" data-popup="headers-menu" class="input-group-addon icon add" title="<roundcube:label name="addheader" />" tabindex="1"><span class="inner"><roundcube:label name="addheader" /></span></a>
+					<div class="col-10">
+						<div class="input-group">
+							<roundcube:object name="composeHeaders" part="to" id="_to" form="form" tabindex="1" aria-required="true" data-recipient-input="true" />
+							<a href="#add-header" data-popup="headers-menu" class="input-group-addon icon add" title="<roundcube:label name="addheader" />" tabindex="1"><span class="inner"><roundcube:label name="addheader" /></span></a>
+						</div>
 					</div>
 				</div>
 				<div id="compose_cc" class="hidden form-group row">
 					<label for="_cc" class="col-2 col-form-label"><roundcube:label name="cc" /></label>
-					<div class="input-group col-10">
-						<roundcube:object name="composeHeaders" part="cc" id="_cc" form="form" tabindex="1" data-recipient-input="true" />
-						<a href="#delete" onclick="$('#_cc').val('').change()" class="input-group-addon icon cancel" title="<roundcube:label name='delete' />" tabindex="1"><span class="inner"><roundcube:label name="delete" /></span></a>
+					<div class="col-10">
+						<div class="input-group">
+							<roundcube:object name="composeHeaders" part="cc" id="_cc" form="form" tabindex="1" data-recipient-input="true" />
+							<a href="#delete" onclick="$('#_cc').val('').change()" class="input-group-addon icon cancel" title="<roundcube:label name='delete' />" tabindex="1"><span class="inner"><roundcube:label name="delete" /></span></a>
+						</div>
 					</div>
 				</div>
 				<div id="compose_bcc" class="hidden form-group row">
 					<label for="_bcc" class="col-2 col-form-label"><roundcube:label name="bcc" /></label>
-					<div class="input-group col-10">
-						<roundcube:object name="composeHeaders" part="bcc" id="_bcc" form="form" tabindex="1" data-recipient-input="true" />
-						<a href="#delete" onclick="$('#_bcc').val('').change()" class="input-group-addon icon cancel" title="<roundcube:label name='delete' />" tabindex="1"><span class="inner"><roundcube:label name="delete" /></span></a>
+					<div class="col-10">
+						<div class="input-group">
+							<roundcube:object name="composeHeaders" part="bcc" id="_bcc" form="form" tabindex="1" data-recipient-input="true" />
+							<a href="#delete" onclick="$('#_bcc').val('').change()" class="input-group-addon icon cancel" title="<roundcube:label name='delete' />" tabindex="1"><span class="inner"><roundcube:label name="delete" /></span></a>
+						</div>
 					</div>
 				</div>
 				<div id="compose_replyto" class="hidden form-group row">
 					<label for="_replyto" class="col-2 col-form-label"><roundcube:label name="replyto" /></label>
-					<div class="input-group col-10">
-						<roundcube:object name="composeHeaders" part="replyto" id="_replyto" form="form" tabindex="1" data-recipient-input="true" />
-						<a href="#delete" onclick="$('#_replyto').val('').change()" class="input-group-addon icon cancel" title="<roundcube:label name='delete' />" tabindex="1"><span class="inner"><roundcube:label name="delete" /></span></a>
+					<div class="col-10">
+						<div class="input-group">
+							<roundcube:object name="composeHeaders" part="replyto" id="_replyto" form="form" tabindex="1" data-recipient-input="true" />
+							<a href="#delete" onclick="$('#_replyto').val('').change()" class="input-group-addon icon cancel" title="<roundcube:label name='delete' />" tabindex="1"><span class="inner"><roundcube:label name="delete" /></span></a>
+						</div>
 					</div>
 				</div>
 				<div id="compose_followupto" class="hidden form-group row">
 					<label for="_followupto" class="col-2 col-form-label"><roundcube:label name="followupto" /></label>
-					<div class="input-group col-10">
-						<roundcube:object name="composeHeaders" part="followupto" id="_followupto" form="form" tabindex="1" data-recipient-input="true" />
-						<a href="#delete" onclick="$('#_followupto').val('').change()" class="input-group-addon icon cancel" title="<roundcube:label name='delete' />" tabindex="1"><span class="inner"><roundcube:label name="delete" /></span></a>
+					<div class="col-10">
+						<div class="input-group">
+							<roundcube:object name="composeHeaders" part="followupto" id="_followupto" form="form" tabindex="1" data-recipient-input="true" />
+							<a href="#delete" onclick="$('#_followupto').val('').change()" class="input-group-addon icon cancel" title="<roundcube:label name='delete' />" tabindex="1"><span class="inner"><roundcube:label name="delete" /></span></a>
+						</div>
 					</div>
 				</div>
 				<div id="compose_subject" class="form-group row">