fix(header): added text overflow

This commit is contained in:
trashtemp 2021-12-27 14:44:02 +01:00
parent 2ce4136a52
commit 7241498f87
No known key found for this signature in database
GPG key ID: D1F0DB65081B0FC6

View file

@ -1,5 +1,6 @@
import { observer } from "mobx-react-lite";
import { Redirect, useParams } from "react-router";
import { Server } from "revolt.js/dist/maps/Servers";
import styled, { css } from "styled-components";
import { attachContextMenu } from "preact-context-menu";
@ -48,6 +49,32 @@ const ServerList = styled.div`
}
`;
const ServerBanner = styled.div`
background-color: var(--primary-background);
.title {
height: 48px;
display: flex;
align-items: center;
padding: 10px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
gap: 8px;
.test {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
`;
interface Props {
server: Server;
}
export default observer(() => {
const client = useClient();
const state = useApplicationState();
@ -137,7 +164,13 @@ export default observer(() => {
return (
<ServerBase>
<ServerHeader server={server} />
<ServerBanner>
<div className="title">
<ServerHeader server={server} />
<div className="test">{server.name}</div>
</div>
</ServerBanner>
<ConnectionStatus />
<ServerList
onContextMenu={attachContextMenu("Menu", {