mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-25 00:20:57 -05:00
fix(jumpbar): fixed collision on mobile
This commit is contained in:
parent
68acfe26de
commit
6e89e10461
2 changed files with 22 additions and 4 deletions
|
@ -45,6 +45,10 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
|
|||
justify-content: space-between;
|
||||
transition: color ease-in-out 0.08s;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
${(props) =>
|
||||
props.accent
|
||||
? css`
|
||||
|
@ -86,6 +90,10 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
@ -103,6 +111,12 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
|
|||
padding: 0 12px;
|
||||
`}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
.right > span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default observer(({ channel }: { channel: Channel }) => {
|
||||
|
@ -119,8 +133,10 @@ export default observer(({ channel }: { channel: Channel }) => {
|
|||
<div>
|
||||
<Text id="app.main.channel.misc.viewing_old" />
|
||||
</div>
|
||||
<div>
|
||||
<Text id="app.main.channel.misc.jump_present" />{" "}
|
||||
<div className="right">
|
||||
<span>
|
||||
<Text id="app.main.channel.misc.jump_present" />
|
||||
</span>
|
||||
<DownArrowAlt size={18} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -56,8 +56,10 @@ export default observer(
|
|||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Text id="app.main.channel.misc.jump_beginning" />
|
||||
<div className="right">
|
||||
<span>
|
||||
<Text id="app.main.channel.misc.jump_beginning" />
|
||||
</span>
|
||||
<UpArrowAlt size={20} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue