fix(chat): improve font and spacing in chat messages
- commit
- a673124420d17d95394a861562cb220d9705b6f9
- author
- Kit · · 2025-07-03 20:57 UTC
- parent
- d472d9a
- signature
- SSH Unverified
SHA256:H91DFuEG4jpk5edzLA4aUKkpv4zv9Q339ipRmkph6TkThe key is unknown
1 file · +10 -2
M src/lib/components/chat-room.svelte +10 -2
| @@ -575,7 +575,9 @@ function handleLoginSuccess() { | |||
| 575 | 575 | }}> | |
| 576 | 576 | <span class="nickname pointer-events-none">{message.user.nickname}:</span> | |
| 577 | 577 | </Tooltip> | |
| 578 | - | <FormattedMessage {message} allowFormatting={true} /> | |
| 578 | + | <span class="message-content"> | |
| 579 | + | <FormattedMessage {message} allowFormatting={true} /> | |
| 580 | + | </span> | |
| 579 | 581 | {/if} | |
| 580 | 582 | </div> | |
| 581 | 583 | {/each} | |
| @@ -674,7 +676,7 @@ function handleLoginSuccess() { | |||
| 674 | 676 | <style> | |
| 675 | 677 | .chat-area, .users-list { | |
| 676 | 678 | font-size: 1rem; | |
| 677 | - | font-family: "Pixelated MS Sans Serif", Arial, Verdana, Tahoma, sans-serif; | |
| 679 | + | font-family: Arial, "Pixelated MS Sans Serif", Verdana, Tahoma, sans-serif; | |
| 678 | 680 | } | |
| 679 | 681 | ||
| 680 | 682 | input:not(.styled-input) { | |
| @@ -734,6 +736,12 @@ function handleLoginSuccess() { | |||
| 734 | 736 | font-weight: bold; | |
| 735 | 737 | color: #2d31a6; | |
| 736 | 738 | cursor: help; | |
| 739 | + | flex-shrink: 0; | |
| 740 | + | } | |
| 741 | + | ||
| 742 | + | .message-content { | |
| 743 | + | flex: 1; | |
| 744 | + | min-width: 0; | |
| 737 | 745 | } | |
| 738 | 746 | ||
| 739 | 747 | .message .content { | |
| @@ -575,7 +575,9 @@ function handleLoginSuccess() { | |||||
| 575 | }}> | 575 | }}> | ||
| 576 | <span class="nickname pointer-events-none">{message.user.nickname}:</span> | 576 | <span class="nickname pointer-events-none">{message.user.nickname}:</span> | ||
| 577 | </Tooltip> | 577 | </Tooltip> | ||
| 578 | - | <FormattedMessage {message} allowFormatting={true} /> | 578 | + | <span class="message-content"> |
| 579 | + | <FormattedMessage {message} allowFormatting={true} /> | |||
| 580 | + | </span> | |||
| 579 | {/if} | 581 | {/if} | ||
| 580 | </div> | 582 | </div> | ||
| 581 | {/each} | 583 | {/each} | ||
| @@ -674,7 +676,7 @@ function handleLoginSuccess() { | |||||
| 674 | <style> | 676 | <style> | ||
| 675 | .chat-area, .users-list { | 677 | .chat-area, .users-list { | ||
| 676 | font-size: 1rem; | 678 | font-size: 1rem; | ||
| 677 | - | font-family: "Pixelated MS Sans Serif", Arial, Verdana, Tahoma, sans-serif; | 679 | + | font-family: Arial, "Pixelated MS Sans Serif", Verdana, Tahoma, sans-serif; |
| 678 | } | 680 | } | ||
| 679 | 681 | ||||
| 680 | input:not(.styled-input) { | 682 | input:not(.styled-input) { | ||
| @@ -734,6 +736,12 @@ function handleLoginSuccess() { | |||||
| 734 | font-weight: bold; | 736 | font-weight: bold; | ||
| 735 | color: #2d31a6; | 737 | color: #2d31a6; | ||
| 736 | cursor: help; | 738 | cursor: help; | ||
| 739 | + | flex-shrink: 0; | |||
| 740 | + | } | |||
| 741 | + | ||||
| 742 | + | .message-content { | |||
| 743 | + | flex: 1; | |||
| 744 | + | min-width: 0; | |||
| 737 | } | 745 | } | ||
| 738 | 746 | ||||
| 739 | .message .content { | 747 | .message .content { | ||