diff --git a/src/Viewer.tsx b/src/Viewer.tsx index a531660..44d6945 100644 --- a/src/Viewer.tsx +++ b/src/Viewer.tsx @@ -33,7 +33,7 @@ export default function Viewer({
{showChannelName ? (
-

{currentChannel?.properties.name}

+

{currentChannel?.properties.name}

) : null} {currentClients?.map((client, i) => { diff --git a/src/styles/Generator.scss b/src/styles/Generator.scss index 71b4b17..93e3d53 100644 --- a/src/styles/Generator.scss +++ b/src/styles/Generator.scss @@ -107,7 +107,6 @@ $breakpoint-2: 565px; background-repeat: no-repeat; background-size: cover; min-height: 500px; - padding: 10px; } } diff --git a/src/styles/Viewer.scss b/src/styles/Viewer.scss index b7301bc..57d8543 100644 --- a/src/styles/Viewer.scss +++ b/src/styles/Viewer.scss @@ -3,20 +3,25 @@ flex-direction: column; gap: 0 0; font-size: 3rem; + color: white; + box-sizing: border-box; + padding: 10px; + h1, + p { + margin: 0; + background-color: #2f313680; + padding: 0.25rem 0.5rem; + border-radius: 0.25rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 20ch; + } .channelNameContainer { display: flex; align-items: center; margin-bottom: 20px; - h3 { - font-size: 1.7rem; - font-weight: 500; - margin: 0; - background-color: rgba(47, 49, 54, 0.5); - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - color: white; - } } .client { @@ -27,22 +32,13 @@ margin: 0.5rem 0; svg { - width: 2.8rem; - height: 2.8rem; + width: 2.1rem; + aspect-ratio: 1/1; margin-right: 0.5rem; } - p { - margin: 0; - color: white; - background-color: rgba(47, 49, 54, 0.5); - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - // ellipsis after 22 characters - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 20ch; + p { + font-size: 1.4rem; } } }