From d33f9710c20130305be44e52a7334bb42c81f3c0 Mon Sep 17 00:00:00 2001
From: djmaze <djmaze@djmaze.lan>
Date: Tue, 15 Sep 2020 23:36:42 +0200
Subject: [PATCH] Improve SquireUI on mobile by placing toolbar fixed at bottom
 of screen (and top of touch keyboard)

---
 dev/Styles/Compose.less  |  4 ++--
 dev/Styles/Identity.less |  2 +-
 dev/Styles/SquireUI.less | 23 ++++++++++++++++++++---
 dev/Styles/_CkeFix.less  |  2 +-
 4 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/dev/Styles/Compose.less b/dev/Styles/Compose.less
index c73b7eda1..5bfdb1193 100644
--- a/dev/Styles/Compose.less
+++ b/dev/Styles/Compose.less
@@ -5,7 +5,7 @@
 		width: 98%;
 		max-width: 1000px;
 		margin: 10px auto;
-		min-height: calc(100% - 30px);
+		min-height: calc(100% - 44px);
 
 		.modal-body {
 			padding: 0;
@@ -87,7 +87,7 @@
 		color: #333;
 
 		html.rl-mobile &{
-			overflow: scroll;
+			overflow: auto;
 		}
 
 		.e-identity {
diff --git a/dev/Styles/Identity.less b/dev/Styles/Identity.less
index f9f43908c..635afe550 100644
--- a/dev/Styles/Identity.less
+++ b/dev/Styles/Identity.less
@@ -2,7 +2,7 @@
 	.b-identity-content {
 
 		&.modal {
-			width: 750px;
+			width: 800px;
 		}
 
 		.modal-header {
diff --git a/dev/Styles/SquireUI.less b/dev/Styles/SquireUI.less
index 26153aadb..b4409e377 100644
--- a/dev/Styles/SquireUI.less
+++ b/dev/Styles/SquireUI.less
@@ -1,5 +1,6 @@
 .squire-toolbar {
 	overflow-x: auto;
+	overflow-y: hidden;
 	white-space: nowrap;
 }
 
@@ -18,7 +19,7 @@
 	cursor: pointer;
 	font-size: 14px;
 	height: 1.5em;
-	line-height: 1.7em;
+	line-height: 1.7;
 	margin: 0;
 	padding: 0;
 	vertical-align: bottom;
@@ -30,10 +31,10 @@
 }
 
 .squire-toolgroup select {
-	width: 7em;
+	width: 7em !important;
 }
 .squire-toolgroup select[data-action="fontSize"] {
-	width: 4em;
+	width: 4em !important;
 }
 .squire-toolgroup select[data-action="bold"] {
 	font-weight: bold;
@@ -76,3 +77,19 @@
 .squire-mode-plain .squire-toolgroup:not(#squire-toolgroup-mode) {
 	display: none;
 }
+
+/* @media (hover: none) */
+.rl-mobile .squire-toolbar {
+	padding: 1px;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+.rl-mobile .squire-toolgroup > button,
+.rl-mobile .squire-toolgroup > select,
+.rl-mobile .squire-toolgroup > input[type="color"] {
+	height: 2.5em;
+	line-height: 2.8;
+	width: 3em;
+}
diff --git a/dev/Styles/_CkeFix.less b/dev/Styles/_CkeFix.less
index 5ef4d14b9..65a88b037 100644
--- a/dev/Styles/_CkeFix.less
+++ b/dev/Styles/_CkeFix.less
@@ -16,7 +16,7 @@
 }
 
 .cke_top {
-	padding: 6px 4px 1px 6px !important;
+	padding: 6px 4px 1px 6px;
 	box-shadow: none !important;
 	border-bottom: 1px solid #b6b6b6 !important;
 	background: #F0F0F0 !important;