diff --git a/front/src/views/sidebar/rooms/Room.vue b/front/src/views/sidebar/rooms/Room.vue
index d5c6744..0644938 100644
--- a/front/src/views/sidebar/rooms/Room.vue
+++ b/front/src/views/sidebar/rooms/Room.vue
@@ -74,11 +74,9 @@ const router = useRouter();
 
 .object {
     color: var(--secondary-text);
-    line-height: 1.8rem;
     font-size: 1.3rem;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
-    width: 100%;
 }
 </style>
diff --git a/front/src/views/sidebar/rooms/threads/Thread.vue b/front/src/views/sidebar/rooms/threads/Thread.vue
index cc9c659..830dfb1 100644
--- a/front/src/views/sidebar/rooms/threads/Thread.vue
+++ b/front/src/views/sidebar/rooms/threads/Thread.vue
@@ -17,13 +17,14 @@ const router = useRouter();
         v-bind:class="store.state.activeRoom == props.threadId ? 'selected' : ''"
         class="room"
     >
-        {{ room.roomName }}
+        <div class="roomName">{{ room.roomName }}</div>
         <Badge class="badge" v-if="room.notSeen > 0" :value="room.notSeen" type="badge-number" />
     </div>
 </template>
 
 <style scoped>
 .room {
+    display: flex;
     box-sizing: border-box;
     contain: content;
     display: flex;
@@ -33,6 +34,16 @@ const router = useRouter();
     color: var(--secondary-text);
 }
 
+.badge {
+    margin-right: 7px;
+}
+
+.roomName {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
 .room:hover,
 .selected {
     background-color: var(--selected);