diff --git a/package.json b/package.json index 7bdb9bbb..53bce78e 100644 --- a/package.json +++ b/package.json @@ -143,7 +143,8 @@ "Image", "NotificationEvent", "NodeList", - "DOMParser" + "DOMParser", + "CSS" ], "ignore": [ "dist", diff --git a/routes/_components/compose/ComposeBox.html b/routes/_components/compose/ComposeBox.html index e5500a09..baaf2f48 100644 --- a/routes/_components/compose/ComposeBox.html +++ b/routes/_components/compose/ComposeBox.html @@ -15,10 +15,7 @@ -
-
- -
+ {#if !hideBottomBorder}
{/if} @@ -59,27 +56,6 @@ width: 100%; } - .compose-box-button-wrapper { - /* - * 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. - */ - width: -moz-fit-content; - width: fit-content; - margin-left: auto; - display: flex; - justify-content: flex-end; - } - - .compose-box-button-wrapper.compose-button-sticky { - position: -webkit-sticky; - position: sticky; - top: 52px; /* padding-top for .main-content plus 10px */ - z-index: 5000; - } - .compose-content-warning-wrapper { grid-area: cw; } @@ -90,18 +66,11 @@ max-width: calc(100vw - 20px); width: 580px; } + .compose-box.slim-size { width: 560px; max-width: calc(100vw - 40px); } - .compose-box-button-wrapper.compose-button-sticky { - top: 57px; /* padding-top for .main-content plus 5px */ - } - } - @media (max-width: 991px) { - .compose-box-button-wrapper.compose-button-sticky { - top: 62px; /* padding-top for .main-content plus 10px */ - } } diff --git a/scss/global.scss b/scss/global.scss index 9e9a5507..d1606c30 100644 --- a/scss/global.scss +++ b/scss/global.scss @@ -30,15 +30,16 @@ body { color: var(--body-text-color); background: var(--body-bg); -webkit-tap-highlight-color: transparent; // fix for blue background on spoiler tap on Chrome for Android - // Prevent horizontal scrolling on mobile Firefox on small screens. Unfortunately iOS Safari ignores this, - // but if we were to put overflow-x:hidden anywhere else (which fixes it: https://stackoverflow.com/a/14271049), - // then it would break the sticky-positioned button. - overflow-x: hidden; + overflow-x: hidden; // Prevent horizontal scrolling on mobile Firefox on small screens } .main-content { contain: content; // see https://www.w3.org/TR/2018/CR-css-contain-1-20181108/#valdef-contain-content // these paddings should be kept in sync with getMainTopMargin.js + @supports (-webkit-overflow-scrolling: touch) { + // fixes iOS Safari horizontal scrolling (see https://github.com/nolanlawson/pinafore/issues/667) + overflow-x: hidden; + } padding-top: 42px; @media (max-width: 991px) { padding-top: 52px; @@ -246,4 +247,4 @@ textarea { .inline-emoji { font-family: PinaforeEmoji, sans-serif; -} \ No newline at end of file +} diff --git a/templates/2xx.html b/templates/2xx.html index 3d9b4412..2d6fb272 100644 --- a/templates/2xx.html +++ b/templates/2xx.html @@ -17,7 +17,7 @@