- Enable renaming of own display name permanently via UI

- Make peerId completely ephemeral
- Stabilize RTCConnection by closing connections cleanly

public/styles.css

@@ -450,6 +450,7 @@ x-peer[status] x-icon {
 }
 
 .device-descriptor {
+    width: 100%;
     text-align: center;
 }
 
@@ -557,6 +558,28 @@ footer .font-body2 {
     padding-bottom: 1px;
 }
 
+#display-name {
+    display: inline-block;
+    text-align: left;
+    padding-right: 1rem;
+    border: none;
+    outline: none;
+    max-width: 18em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-bottom: -5px;
+}
+
+#edit-pen {
+    width: 1rem;
+    height: 1rem;
+    margin-left: -1rem;
+    margin-bottom: -2px;
+    position: relative;
+    z-index: -1;
+}
+
 /* Dialog */
 
 x-dialog x-background {
@@ -1012,11 +1035,11 @@ button::-moz-focus-inner {
 x-toast {
     position: absolute;
     min-height: 48px;
-    bottom: 24px;
+    top: 50px;
     width: 100%;
     max-width: 344px;
-    background-color: #323232;
-    color: rgba(255, 255, 255, 0.95);
+    background-color: rgb(var(--text-color));
+    color: rgb(var(--bg-color));
     align-items: center;
     box-sizing: border-box;
     padding: 8px 24px;
@@ -1030,7 +1053,7 @@ x-toast {
 
 x-toast:not([show]):not(:hover) {
     opacity: 0;
-    transform: translateY(100px);
+    transform: translateY(-100px);
 }