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;
}
}
}