refac: styling

This commit is contained in:
Timothy Jaeryang Baek 2025-02-06 01:28:33 -08:00
parent 8ca21ea838
commit 14398ab628

View File

@ -97,7 +97,7 @@
{#if citations.length > 0}
<div class=" py-0.5 -mx-0.5 w-full flex gap-1 items-center flex-wrap">
{#if citations.length <= 3}
<div class="flex text-xs font-medium">
<div class="flex text-xs font-medium flex-wrap">
{#each citations as citation, idx}
<button
id={`source-${citation.source.name}`}
@ -113,7 +113,7 @@
</div>
{/if}
<div
class="flex-1 mx-1 line-clamp-1 text-black/60 hover:text-black dark:text-white/60 dark:hover:text-white transition"
class="flex-1 mx-1 truncate text-black/60 hover:text-black dark:text-white/60 dark:hover:text-white transition"
>
{citation.source.name}
</div>
@ -121,13 +121,21 @@
{/each}
</div>
{:else}
<Collapsible bind:open={isCollapsibleOpen} className="w-full">
<Collapsible
bind:open={isCollapsibleOpen}
className="w-full max-w-full "
buttonClassName="w-fit max-w-full"
>
<div
class="flex items-center gap-2 text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 transition cursor-pointer"
class="flex w-full overflow-auto items-center gap-2 text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 transition cursor-pointer"
>
<div class="flex-grow flex items-center gap-1 overflow-hidden">
<span class="whitespace-nowrap hidden sm:inline">{$i18n.t('References from')}</span>
<div class="flex items-center">
<div
class="flex-1 flex items-center gap-1 overflow-auto scrollbar-none w-full max-w-full"
>
<span class="whitespace-nowrap hidden sm:inline flex-shrink-0"
>{$i18n.t('References from')}</span
>
<div class="flex items-center overflow-auto scrollbar-none w-full max-w-full flex-1">
<div class="flex text-xs font-medium items-center">
{#each citations.slice(0, 2) as citation, idx}
<button
@ -145,14 +153,14 @@
{idx + 1}
</div>
{/if}
<div class="flex-1 mx-1 line-clamp-1 truncate">
<div class="flex-1 mx-1 truncate">
{citation.source.name}
</div>
</button>
{/each}
</div>
</div>
<div class="flex items-center gap-1 whitespace-nowrap">
<div class="flex items-center gap-1 whitespace-nowrap flex-shrink-0">
<span class="hidden sm:inline">{$i18n.t('and')}</span>
{citations.length - 2}
<span>{$i18n.t('more')}</span>
@ -167,7 +175,7 @@
</div>
</div>
<div slot="content">
<div class="flex text-xs font-medium">
<div class="flex text-xs font-medium flex-wrap">
{#each citations as citation, idx}
<button
class="no-toggle outline-none flex dark:text-gray-300 p-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition rounded-xl max-w-96"
@ -181,7 +189,7 @@
{idx + 1}
</div>
{/if}
<div class="flex-1 mx-1 line-clamp-1 truncate">
<div class="flex-1 mx-1 truncate">
{citation.source.name}
</div>
</button>