From f49fde09234d9df3c80f65da57521c930c6c26e8 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Wed, 2 Mar 2022 15:47:45 +0100 Subject: [PATCH] fix: make buttons visually align in Chrome and Firefox --- .../src/components/UserFeedback/styles.module.css | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/website/src/components/UserFeedback/styles.module.css b/website/src/components/UserFeedback/styles.module.css index c409b3c19e..224a12d5a5 100644 --- a/website/src/components/UserFeedback/styles.module.css +++ b/website/src/components/UserFeedback/styles.module.css @@ -209,14 +209,23 @@ button.close-button { .open-feedback-button { padding-block: var(--ifm-spacing-vertical); + padding-inline: var(--ifm-spacing-horizontal); border-radius: 0 var(--ifm-global-radius) var(--ifm-global-radius) 0; border: none; position: fixed; bottom: 25vh; right: 0; - writing-mode: vertical-lr; - transform: rotate(180deg); transition: var(--fade-in-transition); + transform: rotate(180deg); + writing-mode: vertical-lr; +} + +/* note: Chrome doesn't support writing-mode on buttons, so we need to add a + span for the text and change the writing-mode there. Simultaneously, Firefox + does some weird stuff with the padding of the text if writing-mode isn't + specified on the button itself, so we need to set that too. */ +.open-feedback-button > span { + writing-mode: vertical-lr; } .invisible,