I followed along with a slack like example on this website and I started to add some features to it.
One of the things I added was the ability to add messages. I’m having trouble with sizing though. Below is how I am setting up the panel with messages in it. From my understanding I would’ve thought that if I set the height to fill in the main column of messagepanel he message panel would show only the messages that it can fit and you would have to scroll through the message panel to see the rest. What it ends up happening is it pushes the box to add messages off screen and I have to scroll down the whole screen to see it
When I use hard code the value and use width px 970 I get the expected outcome where the addmessage part is still there and I can scroll through the message panel but, of course this doesn’t work with different resolutions/browsers. So I’m not sure how I would go about making this work.
messageEntry message = column [ width fill, Element.spacingXY 0 5 ] [ row [ Element.spacingXY 10 0 ] [ el [ Element.Font.bold ] <| Element.text message.author, Element.text message.time ] , Element.paragraph  [ Element.text message.text ] ] messagePanel = column [Element.paddingXY 10 0, Element.spacingXY 0 0, height (px 970)][ column [Element.spacingXY 0 20, Element.scrollbarY ] <| List.map messageEntry messages ]