# LESSONS.md
Date: 2025-09-28 14:41
Feature: Messaging
Bug: Message styling - all messages appear on left side

## WHAT WENT WRONG
- CSS for .messages container was missing display:flex and flex-direction:column
- Without flex display, margin-left:auto on sent messages didn't work
- align-self:flex-start on received messages had no effect without flex parent

## ROOT CAUSE
The .messages container only had flex:1 but not display:flex, preventing child message elements from using flexbox alignment properties.

## WHAT WENT RIGHT
- Previous investigation correctly identified the JavaScript fixes needed
- actualUserId variable was properly implemented
- Backend was already returning current_user_id

## TIME WASTERS
- Initial focus on JavaScript when the real issue was CSS
- Not checking browser DevTools for flex display initially

## BETTER APPROACH NEXT TIME
1. Always check CSS display properties in browser DevTools first
2. Verify parent containers have proper flex setup before debugging child alignment
3. Test with browser DevTools to confirm classes are being applied

## FIX SUMMARY
Added two lines to .messages CSS (lines 43-44):
- display: flex;
- flex-direction: column;

This enabled the existing sent/received class styling to work properly.