Fix alignment of chat messages and add docs

src/routes/(docs)/docs/+page.md

@@ -75,7 +75,9 @@ this page accepts a `channel` search parameter, that is the channel you want to
 
 it also accepts a `theme` search parameter, that changes the theme of the chat. the available themes are: `pixel`.
 
-it also receives a `messageScreenTime` search parameter, that changes how long the messages are displayed on the screen
+it also receives a `messageScreenTime` search parameter, that changes how long the messages are displayed on the screen.
+
+it also receives an `align` search parameter, that changes the alignment of the chat. the available alignments are: `top`, `bottom`. defaults to `bottom`.
 
 example: [https://lucianoratamero.github.io/stream-tools/twitch-chat/?channel=luciano_ratamero&theme=pixel](https://lucianoratamero.github.io/stream-tools/twitch-chat/?channel=luciano_ratamero&theme=pixel)
 

src/routes/twitch-chat/+page.svelte

@@ -75,7 +75,7 @@
 		let channel = searchParams.get('channel');
 		let twitch_id = searchParams.get('twitch_id');
 		let message_screen_time = searchParams.get('messageScreenTime');
-		align = searchParams.get('align') || 'top';
+		align = searchParams.get('align') || 'bottom';
 		theme = searchParams.get('theme');
 
 		if (!channel) {
@@ -635,7 +635,10 @@
 	<div>Channel not found :\ Please put the channel name as the `channel` search parameter.</div>
 {/if}
 
-<div id="chat" class={`${theme || ''} ${align === 'bottom' ? 'justify-end' : ''} flex h-screen`}>
+<div
+	id="chat"
+	class={`${theme || ''} ${align === 'top' ? 'flex-col-reverse justify-start' : 'flex-col justify-end'} flex h-screen`}
+>
 	{#each collection as item (item.message)}
 		<div class="message" in:fade={{ duration: 150 }} out:slide>
 			{@html item.processed}