Fix: Small fixes to Sessions tab

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 && <Check size={18} />}
+                                {swatch === value && <Check size={22} />}
                             </Swatch>
                         ))}
                     </div>

src/pages/settings/Settings.module.scss

@@ -75,6 +75,7 @@
         .container {
             width: 218px;
             padding: 60px 8px;
+            height: fit-content;
         }
 
         .divider {

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 {

src/pages/settings/panes/Sessions.tsx

@@ -133,9 +133,7 @@ export function Sessions() {
                             <div>{getSystemIcon(session)}</div>
                         </div>
                         <div className={styles.info}>
-                            <span className={styles.name}>
+                            <input type="text" className={styles.name} value={session.friendly_name} autocomplete="off" />
-                                {session.friendly_name}
-                            </span>
                             <span className={styles.time}>
                                 <Text
                                     id="app.settings.pages.sessions.created"