tykayn/ng-implementation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
ng-implementation/airwatch/CHANGES.md
Tykayn 949641d881 rename airwatch folder
2025-09-09 14:43:57 +02:00

1.6 KiB
Raw Blame History

Changes Made

Auto-scrolling Fix

The issue was that the conversation container wasn't automatically scrolling to the bottom when new messages were added. This was fixed by:

  1. Removing the direct DOM manipulation approach in the store subscription:

    // Old code
if (prevMessagesLength !== newMessagesLength) {
  const container = document.querySelector('.main-conversation-container');
  if (container) {
    container.scrollTop = container.scrollHeight;
  }
}

// New code
if (prevMessagesLength !== newMessagesLength) {
  this.shouldScrollToBottom = true;
}

  2. Using the existing ViewChild and ngAfterViewChecked approach consistently throughout the component.

This ensures that when new messages are added to the conversation, the view will automatically scroll to the bottom to show the latest message.

Storybook @font-face Issue

The issue was that Storybook couldn't understand the @font-face declarations in the _typo.scss file because they were using tilde (~) notation for paths. This was fixed by:

  1. Changing all font paths from tilde notation to relative paths: 
    // Old path
src: url('~src/app/styles/typo/Barlow/Barlow-Thin.ttf') format('truetype');

// New path
src: url('../styles/typo/Barlow/Barlow-Thin.ttf') format('truetype');

This change allows Storybook to properly process the @font-face declarations and load the fonts correctly.

Summary

These changes ensure that:

  1. The conversation container automatically scrolls to the latest message when new messages are added.
  2. Storybook can properly load and display fonts defined with @font-face declarations.