Adjust room name and edit flow layout

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

css/style.scss

@@ -725,14 +725,17 @@ video {
 	position: absolute;
 	top: 0;
 	right: 0;
-	/* The app uses border-box sizing, so the padding is 15px like in the Files
-	 * app plus 8px of half the size of the icon */
-	padding: 23px;
-	opacity: 0.5;
+	padding: 22px;
+	opacity: .3;
 	/* Higher index than the trigger to hide it when the sidebar is open */
 	z-index: 20;
 }
 
+#app-sidebar .close:hover,
+#app-sidebar .close:focus {
+	opacity: 1;
+}
+
 #videos .videoContainer.speaking:not(.videoView) .nameIndicator,
 #videos .videoContainer.videoView.speaking .nameIndicator .icon-audio {
 	animation: pulse 1s;
@@ -918,8 +921,39 @@ video {
 .detailCallInfoContainer,
 .authorRow {
 	.room-name {
-		display: inline-block;
+		display: block;
+		margin-right: 29px;
+
+		.label {
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+		}
+
+		.input-wrapper {
+			position: relative;
+
+			.username {
+				width: 100%;
+				margin: 4px 0 4px 0 !important;
+				font-size: 15px;
+				font-weight: 300;
+				padding-right: 44px;
+				text-overflow: ellipsis;
+			}
+
+			.icon-confirm.confirm-button {
+				position: absolute;
+				right: 0;
+				top: 2px;
+				padding: 12px 21px;
+				margin: 0;
+				background-color: transparent !important;
+				border: none;
+			}
+		}
 	}
+
 	.guest-name p {
 		display: inline-block;
 		padding: 9px 0;
@@ -929,8 +963,14 @@ video {
 			display: flex;
 			align-items: center;
 			.edit-button {
-				margin-left: 5px;
 				display: none;
+
+				.icon {
+					background-color: transparent;
+					border: none;
+					padding: 13px 22px;
+					margin: 0;
+				}
 			}
 			&:hover .edit-button {
 				display: block;