refac: styling

This commit is contained in:
Timothy Jaeryang Baek 2025-01-02 20:23:07 -08:00
parent 66b8166397
commit 0c49553f79

View File

@ -61,13 +61,13 @@
); );
} }
}); });
// Group emojis into rows of 6 // Group emojis into rows of 8
emojiRows = []; emojiRows = [];
let currentRow = []; let currentRow = [];
flattenedEmojis.forEach((item) => { flattenedEmojis.forEach((item) => {
if (item.type === 'emoji') { if (item.type === 'emoji') {
currentRow.push(item); currentRow.push(item);
if (currentRow.length === 7) { if (currentRow.length === 8) {
emojiRows.push(currentRow); emojiRows.push(currentRow);
currentRow = []; currentRow = [];
} }
@ -126,7 +126,7 @@
{#if emojiRows.length === 0} {#if emojiRows.length === 0}
<div class="text-center text-xs text-gray-500 dark:text-gray-400">No results</div> <div class="text-center text-xs text-gray-500 dark:text-gray-400">No results</div>
{:else} {:else}
<div class="w-full flex ml-2"> <div class="w-full flex ml-0.5">
<VirtualList rowHeight={ROW_HEIGHT} items={emojiRows} height={384} let:item> <VirtualList rowHeight={ROW_HEIGHT} items={emojiRows} height={384} let:item>
<div class="w-full"> <div class="w-full">
{#if item.length === 1 && item[0].type === 'group'} {#if item.length === 1 && item[0].type === 'group'}
@ -136,7 +136,7 @@
</div> </div>
{:else} {:else}
<!-- Render emojis in a row --> <!-- Render emojis in a row -->
<div class="flex items-center gap-2 w-full"> <div class="flex items-center gap-1.5 w-full">
{#each item as emojiItem} {#each item as emojiItem}
<Tooltip <Tooltip
content={emojiItem.shortCodes.map((code) => `:${code}:`).join(', ')} content={emojiItem.shortCodes.map((code) => `:${code}:`).join(', ')}