From e4159e1c6d740be2a95c13937dfc8fac74c50e5e Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Tue, 28 Dec 2021 23:40:07 +0100 Subject: [PATCH] hotfix(jumpbar): jump bar fixed on mobile --- .../common/messaging/bars/JumpToBottom.tsx | 25 ++++++++++++++++--- src/components/ui/ComboBox.tsx | 4 +++ 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/src/components/common/messaging/bars/JumpToBottom.tsx b/src/components/common/messaging/bars/JumpToBottom.tsx index e85f1fac..0a3c941c 100644 --- a/src/components/common/messaging/bars/JumpToBottom.tsx +++ b/src/components/common/messaging/bars/JumpToBottom.tsx @@ -13,16 +13,32 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>` z-index: 10; position: relative; + ${(props) => + props.position === "top" && + css` + top: 0; + `} + + ${(props) => + props.position === "bottom" && + css` + top: 65px; + + ${() => + isTouchscreenDevice && + css` + top: -90px; + `} + `} + > div { ${(props) => props.position === "bottom" && css` - top: -26px; - ${() => isTouchscreenDevice && css` - top: -32px; + top: -90px; `} `} @@ -37,7 +53,7 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>` user-select: none; justify-content: space-between; transition: color ease-in-out 0.08s; - top: 48px; + top: -90px; ${(props) => props.accent @@ -53,6 +69,7 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>` ${(props) => props.position === "top" ? css` + top: 48px; border-radius: 0 0 var(--border-radius) var(--border-radius); ` diff --git a/src/components/ui/ComboBox.tsx b/src/components/ui/ComboBox.tsx index d64db866..417f337f 100644 --- a/src/components/ui/ComboBox.tsx +++ b/src/components/ui/ComboBox.tsx @@ -19,4 +19,8 @@ export default styled.select` &:focus { box-shadow: 0 0 0 1.5pt var(--accent); } + + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; `;