refac: table styling

This commit is contained in:
Timothy Jaeryang Baek 2024-11-30 12:22:07 -08:00
parent 3792051604
commit d0eb59ffdb

View File

@ -89,11 +89,9 @@
{/if} {/if}
{:else if token.type === 'table'} {:else if token.type === 'table'}
<div class="relative w-full group"> <div class="relative w-full group">
<div <div class="scrollbar-hidden relative overflow-x-auto max-w-full rounded-lg">
class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full rounded-lg"
>
<table <table
class="table-auto w-full text-sm text-left text-gray-500 dark:text-gray-400 max-w-full rounded-xl" class=" w-full text-sm text-left text-gray-500 dark:text-gray-400 max-w-full rounded-xl"
> >
<thead <thead
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400 border-none" class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400 border-none"
@ -102,16 +100,18 @@
{#each token.header as header, headerIdx} {#each token.header as header, headerIdx}
<th <th
scope="col" scope="col"
class="!px-2 !py-1.5 cursor-pointer select-none border border-gray-50 dark:border-gray-850" class="!px-3 !py-1.5 whitespace-nowrap break-words cursor-pointer select-none border border-gray-50 dark:border-gray-850"
style={token.align[headerIdx] ? '' : `text-align: ${token.align[headerIdx]}`} style={token.align[headerIdx] ? '' : `text-align: ${token.align[headerIdx]}`}
> >
<div class="flex gap-1.5 items-center"> <div class="flex flex-col gap-1.5 text-left">
<div class="flex-shrink-0">
<MarkdownInlineTokens <MarkdownInlineTokens
id={`${id}-${tokenIdx}-header-${headerIdx}`} id={`${id}-${tokenIdx}-header-${headerIdx}`}
tokens={header.tokens} tokens={header.tokens}
{onSourceClick} {onSourceClick}
/> />
</div> </div>
</div>
</th> </th>
{/each} {/each}
</tr> </tr>
@ -121,10 +121,10 @@
<tr class="bg-white dark:bg-gray-900 dark:border-gray-850 text-xs"> <tr class="bg-white dark:bg-gray-900 dark:border-gray-850 text-xs">
{#each row ?? [] as cell, cellIdx} {#each row ?? [] as cell, cellIdx}
<td <td
class="!px-2 !py-1.5 font-medium text-gray-900 dark:text-white w-max border border-gray-50 dark:border-gray-850" class="!px-3 !py-1.5 text-gray-900 dark:text-white w-max border border-gray-50 dark:border-gray-850"
style={token.align[cellIdx] ? '' : `text-align: ${token.align[cellIdx]}`} style={token.align[cellIdx] ? '' : `text-align: ${token.align[cellIdx]}`}
> >
<div class="flex"> <div class="flex flex-col break-normal">
<MarkdownInlineTokens <MarkdownInlineTokens
id={`${id}-${tokenIdx}-row-${rowIdx}-${cellIdx}`} id={`${id}-${tokenIdx}-row-${rowIdx}-${cellIdx}`}
tokens={cell.tokens} tokens={cell.tokens}