-
-
-
+
+
+
diff --git a/src/components/ui/ColourSwatches.tsx b/src/components/ui/ColourSwatches.tsx
index 62df2515..a081c566 100644
--- a/src/components/ui/ColourSwatches.tsx
+++ b/src/components/ui/ColourSwatches.tsx
@@ -117,7 +117,7 @@ export default function ColourSwatches({ value, onChange }: Props) {
type="small"
key={i}
onClick={() => onChange(swatch)}>
- {swatch === value && }
+ {swatch === value && }
))}
diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss
index a28237e0..6a8b3108 100644
--- a/src/pages/settings/Settings.module.scss
+++ b/src/pages/settings/Settings.module.scss
@@ -75,6 +75,7 @@
.container {
width: 218px;
padding: 60px 8px;
+ height: fit-content;
}
.divider {
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index 0ff9cce6..c7d38ef9 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -69,6 +69,10 @@
font-weight: 600;
color: var(--foreground);
text-transform: uppercase;
+
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
}
a {
@@ -329,6 +333,26 @@
.name {
font-weight: 600;
+ border-bottom: 2px solid transparent;
+ }
+
+ input {
+ background: transparent;
+ border: 0;
+ font-family: inherit;
+ font-size: 1rem;
+ padding: 0;
+ outline: 0;
+ border-radius: 0;
+ color: inherit;
+
+ &:focus {
+ border-bottom: 2px solid var(--accent);
+ }
+
+ &[data-active="true"] {
+ border-bottom: 2px solid inherit;
+ }
}
.icon {
@@ -361,6 +385,7 @@
.name {
text-transform: capitalize;
+ text-overflow: ellipsis;
}
.time {
diff --git a/src/pages/settings/panes/Sessions.tsx b/src/pages/settings/panes/Sessions.tsx
index e543da14..a64b16ea 100644
--- a/src/pages/settings/panes/Sessions.tsx
+++ b/src/pages/settings/panes/Sessions.tsx
@@ -133,9 +133,7 @@ export function Sessions() {
{getSystemIcon(session)}
-
- {session.friendly_name}
-
+