Fixed long twitch name display error (#44)

* Fixed long twitch name display error * Update CHANGELOG.md
crscillitoe · Apr 28, 2024 · 05cd85b · 05cd85b
1 parent cfa4b6e
commit 05cd85b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,10 @@
 # RoboBananaFrontend Changelog
+## 2024.04.28
+### Additions and Fixes
+- Added a multi move option for pokemon playMove, allowing to move multiple spaces with a single command - by [ValpsZ](https://github.com/ValpsZ) - [PR #39](https://github.com/crscillitoe/RoboBananaFrontend/pull/39) & [PR #42](https://github.com/crscillitoe/RoboBananaFrontend/pull/42)
+- Fixed a chat issue where a twitch chat message with a very long username pushed the twitch icon too far to the right - by [Tiranthine](https://github.com/Tiranthine) - [PR #44](https://github.com/crscillitoe/RoboBananaFrontend/pull/44)
+- Also removed the ':' between message name and twitch icon for twitch messages
+
 ## 2024.04.23-26
 ### Additions and Fixes:
 - Improve features of chat TTS mode, including a delay between TTS messages and restricting it to people with certain roles ([502673a...4eb5ddf](https://github.com/crscillitoe/RoboBananaFrontend/compare/df08d7f...4eb5ddf))

diff --git a/src/app/chat-message/chat-message.component.html b/src/app/chat-message/chat-message.component.html
@@ -1,9 +1,8 @@
-<div class="message" [class.highlighted-message]="message.highlight === true" [class.twitch-message]="message.platform === 'twitch'">
+<div class="message" [class.highlighted-message]="message.highlight === true"
+    [class.twitch-message]="message.platform === 'twitch'">
     <div *ngIf="message.renderHeader === true" class="message-header">
         <div class="name-and-badges" [style.color]="message.authorColor">
-            <span class="display-name" [class.t3-glow]="message.isT3">{{message.displayName}}
-                <a *ngIf="message.platform === 'twitch'" style="color: white;">:</a>
-            </span>
+            <span class="display-name" [class.t3-glow]="message.isT3">{{message.displayName}}</span>
 
             <div class="vertical-center">
                 <img *ngFor="let badgeUrl of message.badges; let i = index" class="rank-image"

diff --git a/src/app/chat-message/chat-message.component.scss b/src/app/chat-message/chat-message.component.scss
@@ -138,6 +138,11 @@
     width: 100%;
 }
 
+.twitch-message .name-and-badges {
+    @extend .name-and-badges;
+    width: 80%;
+}
+
 .vertical-center {
     height: 100%;
     display: flex;