From 2c6576e09d56d32961d05003ee36752a62ad1df6 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Thu, 12 Apr 2018 20:23:38 -0700
Subject: [PATCH] Fix compose button covering content (#95)

Fixes #43 for browsers that support fit-content
---
 routes/_components/compose/ComposeBox.html    | 15 ++++++++++++++-
 routes/_components/compose/ComposeButton.html |  2 +-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/routes/_components/compose/ComposeBox.html b/routes/_components/compose/ComposeBox.html
index e1c42c1..f1c1f0d 100644
--- a/routes/_components/compose/ComposeBox.html
+++ b/routes/_components/compose/ComposeBox.html
@@ -60,7 +60,20 @@
   }
 
   .compose-box-button-wrapper {
-    width: 100%;
+    /*
+     * We want pointer-events only for the sticky button, so use fit-content so that
+     * the element doesn't take up the full width, and then set its left margin to
+     * auto so that it sticks to the right. fit-content doesn't work in Edge, but
+     * that just means that content that is level with the button is not clickable.
+     *
+     * Before this, I tried a wrapper element with pointer-events:none and then
+     * pointer-events:auto on the button itself, but in Chrome that made it so
+     * that occasionally hit detection failed and a click on the button would fall
+     * through and click something underneath, which is a worse bug.
+     */
+    width: -moz-fit-content;
+    width: fit-content;
+    margin-left: auto;
     display: flex;
     justify-content: flex-end;
   }
diff --git a/routes/_components/compose/ComposeButton.html b/routes/_components/compose/ComposeButton.html
index 74b1b6e..da81253 100644
--- a/routes/_components/compose/ComposeButton.html
+++ b/routes/_components/compose/ComposeButton.html
@@ -1,4 +1,4 @@
-<div class="compose-box-button-halo frosted-glass">
+<div class="compose-box-button-halo">
   <button class="primary compose-box-button"
           :disabled
           aria-label="{{sticky ? 'Compose' : 'Toot!'}}"