Fix: コミュニティ、チャンネルのタイトルがはみ出ても三点リーダにならない問題

packages/frontend/src/routes/community/channel.vue

@@ -11,7 +11,7 @@
   >
     <div class="community-top-info">
       <Icon icon="material-symbols:chat-rounded" />
-      {{ channel.name }}
+      <span>{{ channel.name }}</span>
     </div>
 
     <div class="main">
@@ -62,7 +62,7 @@
   margin: auto;
 }
 
-.community-top-info svg {
+.community-top-info > svg {
   margin: auto 0;
   width: 1.25rem;
   height: 1.25rem;

packages/frontend/src/routes/community/index.vue

@@ -11,7 +11,7 @@
   >
     <div class="left">
       <div class="community-top-info">
-        {{ presentCommunity.name }}
+        <span>{{ presentCommunity.name }}</span>
       </div>
 
       <div class="channels">
@@ -43,15 +43,18 @@
   display: flex;
   gap: 0.25rem;
   width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   border-bottom: 1px solid var(--border-color);
   padding: 1rem;
   font-size: 1.1rem;
   font-weight: bold;
   box-sizing: border-box;
 }
+
+.community-top-info > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>
 
 <style scoped>