Chat App Illustration with animation | Vue, HTML, SCSS

What are you most proud of, and what would you do differently next time?

What I've done beside the requirements:

• I added simple animation for this page.
• I also revisited Vue, which I had abandoned for a long time.

What challenges did you encounter, and how did you overcome them?

What I encountered:

• I set "min-height: 100vh" in the and styled the element with "height: 100%" but it didn't work.
• It turned out, "height: 100%" only works if the parent element has a specific height. For example: "100px", "20rem", etc.
• I wanted the element to fill in the content of the element. After researching, I found out a way: styled with "display: flex" and styled with "flex-grow: 1"
• Note: the above can only work if is the only static child element inside of . If there was another static element inside of , you have to find other ways.
• I applied the same trick with other elements as well.

What specific areas of your project would you like help with?

What I think can be better:

• Though I added some animation in this app, I've still not yet satisfied with the result.
• Is there a Vue way to manipulate the elements to have them animated in order?