From 524e934f5e33b948232e018b888e8f2f0dac445a Mon Sep 17 00:00:00 2001
From: Samuel Meuli <me@samuelmeuli.com>
Date: Fri, 7 Feb 2020 10:14:28 +0700
Subject: [PATCH] Move toolbar to bottom of editor

---
 .../assets/styles/base/_variables.scss        |  1 -
 .../assets/styles/components/_editor.scss     | 26 ++++++-------------
 .../editor-toolbar/EditorToolbar.tsx          |  2 +-
 3 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/src/renderer/assets/styles/base/_variables.scss b/src/renderer/assets/styles/base/_variables.scss
index 2076119b..40b847ac 100644
--- a/src/renderer/assets/styles/base/_variables.scss
+++ b/src/renderer/assets/styles/base/_variables.scss
@@ -58,7 +58,6 @@ $editor-max-width: 860px;
 $header-height: 37px;
 $input-height: 40px;
 $input-width: 210px;
-$editor-buttons-width: $input-height + $spacing-abs-medium;
 $scrollbar-padding: 4px;
 $scrollbar-width: 14px;
 
diff --git a/src/renderer/assets/styles/components/_editor.scss b/src/renderer/assets/styles/components/_editor.scss
index d7386006..496b0bf0 100644
--- a/src/renderer/assets/styles/components/_editor.scss
+++ b/src/renderer/assets/styles/components/_editor.scss
@@ -1,25 +1,24 @@
 .editor {
 	@include background-color("background-input");
 	position: relative;
+	display: flex;
+	flex-direction: column;
 	border-radius: $border-radius-input;
 	box-shadow: $box-shadow-inset;
 }
 
 .editor-scrollable {
 	display: grid;
+	flex: 1;
 	grid-template-rows: auto auto 1fr;
-	width: 100%;
-	height: 100%;
 	overflow-y: auto;
 
 	@media (max-width: $screen-desktop) {
-		padding: 1.25 * $spacing-abs-large (1.25 * $spacing-abs-large + $editor-buttons-width) 0 1.25 *
-			$spacing-abs-large;
+		padding: (1.25 * $spacing-abs-large) (1.25 * $spacing-abs-large) 0 (1.25 * $spacing-abs-large);
 	}
 
 	@media (min-width: $screen-desktop + 1px) {
-		padding: (2 * $spacing-abs-large) (2 * $spacing-abs-large + $editor-buttons-width) 0
-			(2 * $spacing-abs-large);
+		padding: (2 * $spacing-abs-large) (2 * $spacing-abs-large) 0 (2 * $spacing-abs-large);
 	}
 }
 
@@ -28,18 +27,9 @@
 	font-size: 150%;
 }
 
-.editor-buttons-wrapper {
-	@include background-color("background");
-	position: absolute;
-	top: 0;
-	right: $spacing-abs-medium;
-	bottom: 0;
-	width: $input-height;
-	height: 4 * $input-height;
-	margin-top: auto;
-	margin-bottom: auto;
-	border-radius: $border-radius-button;
-	box-shadow: $box-shadow;
+.editor-toolbar {
+	@include background-color("background-hover");
+	height: $input-height;
 }
 
 // stylelint-disable selector-class-pattern
diff --git a/src/renderer/components/elements/diary-editor/editor-toolbar/EditorToolbar.tsx b/src/renderer/components/elements/diary-editor/editor-toolbar/EditorToolbar.tsx
index 9412b92e..8b8f649b 100644
--- a/src/renderer/components/elements/diary-editor/editor-toolbar/EditorToolbar.tsx
+++ b/src/renderer/components/elements/diary-editor/editor-toolbar/EditorToolbar.tsx
@@ -68,7 +68,7 @@ export default class EditorToolbar extends PureComponent<Props, {}> {
 
 		return (
 			<div
-				className="editor-buttons-wrapper"
+				className="editor-toolbar"
 				onMouseDown={(e): void => {
 					e.preventDefault(); // Keep focus on editor when a button is clicked
 				}}