fix: Start at the bottom of the div by default

This commit is contained in:
April Hall 2025-01-15 12:18:54 -05:00
parent 12ad2431d8
commit 0ae407a443
No known key found for this signature in database
GPG Key ID: A49AC35CB186266C
3 changed files with 8 additions and 8 deletions

View File

@ -45,7 +45,7 @@ async function getMessages(client: cassandra.Client, channelName: string, limit:
const res = await client.execute( const res = await client.execute(
`SELECT * FROM channels.channel_${channelName} WHERE channel_name = '${channelName}' ORDER BY timestamp DESC LIMIT ${limit}`, `SELECT * FROM channels.channel_${channelName} WHERE channel_name = '${channelName}' ORDER BY timestamp DESC LIMIT ${limit}`,
); );
return reverseArray(res.rows); return res.rows;
} catch (e) { } catch (e) {
// @ts-expect-error I don't like this thing yelling at me // @ts-expect-error I don't like this thing yelling at me
console.log(`Error fetching messages: ${e.message}`); console.log(`Error fetching messages: ${e.message}`);

View File

@ -3,7 +3,7 @@ import type { TypeMessage } from '$lib';
import { getMessages, client } from '$lib/server/db'; import { getMessages, client } from '$lib/server/db';
export const load: PageLoad = async () => { export const load: PageLoad = async () => {
const rows = await getMessages(client, '000', 5); const rows = await getMessages(client, '000', 50);
const messages: TypeMessage[] = rows const messages: TypeMessage[] = rows
? rows.map((value) => { ? rows.map((value) => {
return { return {

View File

@ -46,13 +46,13 @@
{/snippet} {/snippet}
<main class="h-full flex flex-col"> <main class="h-full flex flex-col">
<div class="flex-grow flex-auto overflow-y-scroll mx-2 mt-2 mb-1 rounded-lg bg-base-200 border-2 border-base-300">
<div class="w-full"> <div class="w-full">
<h1 class="text-center text-base-content text-2xl"><span class="text-primary">SV</span>Chat</h1> <h1 class="text-center text-base-content text-2xl"><span class="text-primary">SV</span>Chat</h1>
<hr class="w-11/12 border-primary border-1 mx-auto" /> <hr class="w-11/12 border-primary border-1 mx-auto" />
</div> </div>
{@render message(data.messages)} <div class="flex-grow flex-col-reverse flex flex-auto overflow-y-scroll overflow-x-hidden mx-2 mt-2 mb-1 rounded-lg bg-base-200 border-2 border-base-300">
{@render message(log)} {@render message(log)}
{@render message(data.messages)}
</div> </div>
<form class="flex mb-2 mx-2 mt-1" onsubmit={sendMessage}> <form class="flex mb-2 mx-2 mt-1" onsubmit={sendMessage}>
<input type="text" placeholder="Type here" class="input border-base-300 w-5/6 mr-1 border-2" bind:value={msg} /> <input type="text" placeholder="Type here" class="input border-base-300 w-5/6 mr-1 border-2" bind:value={msg} />