Fix conversation name position

Signed-off-by: Joas Schilling <coding@schilljs.com>

1 files changed, 18 insertions, 17 deletions

diff --git a/src/views/RoomSelector.vue b/src/views/RoomSelector.vue
index 4ea5ad0af..7b0842aa6 100644
--- a/src/views/RoomSelector.vue
+++ b/src/views/RoomSelector.vue
@@ -118,7 +118,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 #modal-inner {
 	width: 90vw;
 	max-width: 400px;
@@ -144,31 +144,32 @@ li {
 	padding: 6px;
 	border: 1px solid transparent;
 	display: flex;
-}
-
-li:hover, li:focus {
-	background-color: var(--color-background-dark);
-	border-radius: var(--border-radius-pill);
-}
 
-li.selected {
-	background-color: var(--color-primary-light);
-	border-radius: var(--border-radius-pill);
-}
+	&:hover,
+	&:focus {
+		background-color: var(--color-background-dark);
+		border-radius: var(--border-radius-pill);
+	}
 
-li > span {
-	padding: 5px;
-	vertical-align: middle;
+	&.selected {
+		background-color: var(--color-primary-light);
+		border-radius: var(--border-radius-pill);
+	}
 
+	& > span {
+		padding: 5px 5px 5px 10px;
+		vertical-align: middle;
+	}
 }
 
 #modal-buttons {
 	overflow: hidden;
 	height: 44px;
 	flex-shrink: 0;
-}
 
-#modal-buttons .primary {
-	float: right;
+	.primary {
+		float: right;
+	}
 }
+
 </style>