fixes

index.html

@@ -30,7 +30,7 @@ body {
     /* color: white; */
     height: 100%;
     min-width: 150px;
-    max-width: 400px;
+    max-width: 450px;
     display: flex;
     flex-direction: column;
    
@@ -43,6 +43,8 @@ body {
   flex-direction: row;
   margin-bottom: 1px;
     animation: fadeInUp 0.3s ease-out;
+
+    min-height: 0; 
 }
 
 @keyframes fadeInUp {
@@ -67,6 +69,13 @@ body {
     font-weight: bold;
     flex-direction: column;
     vertical-align: auto;
+
+    flex: 0 0 25%; /* Фиксируем ширину - не растягивается и не сжимается */
+    min-width: 0; /* Важно для работы переноса текста в flex-контейнере */
+    max-width: 25%; /* Ограничиваем максимальную ширину */
+    word-wrap: break-word; /* Перенос длинных слов */
+    overflow-wrap: break-word; /* Современная версия */
+    word-break: break-word; /* Разрыв слов если нужно */
 }
 
 .highlight-message {
@@ -75,9 +84,19 @@ body {
 }
 
 
+.emote-7tv {
+    height: 1.4em;
+    width: auto;
+    vertical-align: middle;
+    display: inline-block;
+    margin: 0 2px;
+    image-rendering: pixelated;
+    image-rendering: -moz-crisp-edges;
+    image-rendering: crisp-edges;
+}
 
 .yt {
-  background-image: url('data:image/svg+xml,<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g fill="%239C92AC" fill-opacity="0.4" fill-rule="evenodd"><path d="M0 40L40 0H20L0 20M40 40V20L20 40"/></g></svg>');
+  background-image: url('data:image/svg+xml,<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g fill="%239C92AC" fill-opacity="0.3" fill-rule="evenodd"><path d="M0 40L40 0H20L0 20M40 40V20L20 40"/></g></svg>');
   background-color: #E53935A0;
 }
 
@@ -106,6 +125,11 @@ body {
     padding: 5px;
     width: 75%;
     color: #fff;
+
+    flex: 1; /* Занимает всё оставшееся пространство */
+    min-width: 0; /* КРИТИЧЕСКИ ВАЖНО для работы текста в flex */
+    word-wrap: break-word;
+    overflow-wrap: break-word;
 }
 </style>