mejorar layout en pantallas chicas

This commit is contained in:
Cat /dev/Nulo 2023-12-13 01:14:05 -03:00
parent e39fb851bf
commit f006df6089
3 changed files with 11 additions and 7 deletions

View file

@ -10,8 +10,8 @@
target="_blank"
rel="noopener"
>
<ExternalLink fill="currentColor" class="h-4" />
<span class="underline">
<ExternalLink fill="currentColor" class="h-4 shrink-0" />
<span class="w-full break-words underline">
<slot>Fuente</slot>
</span>
</a>

View file

@ -54,7 +54,9 @@
e.datasetIdentifier === dataset.identifier &&
e.distributionIdentifier === dist.identifier,
)}
<li class="flex items-center justify-between px-6 py-5">
<li
class="flex flex-col items-center items-stretch justify-between gap-1 px-6 py-5 sm:flex-row"
>
<div>
<h3>
{dist.title}
@ -81,7 +83,9 @@
<small>{dist.fileName}</small>
{/if}
</div>
<div class="flex flex-col items-center gap-2">
<div
class="flex flex-row-reverse place-content-end gap-4 sm:flex-col sm:place-content-center sm:items-center sm:gap-2"
>
{#if !error}
<button
type="button"

View file

@ -56,7 +56,7 @@
<small>
Viendo portal archivado de
<a
class="text-blue-500 underline dark:text-blue-300"
class="break-words text-blue-500 underline dark:text-blue-300"
target="_blank"
rel="noopener"
href={url}>{url}</a
@ -90,14 +90,14 @@
class="flex justify-between px-6 py-5 hover:bg-gray-50 dark:hover:bg-gray-700"
href={datasetLink}
>
<div>
<div class="max-w-full hyphens-auto break-words">
<h3 class="text-lg">{dataset.title}</h3>
<p class="text-sm">{dataset.description}</p>
</div>
<ArrowForward
fill="currentColor"
aria-hidden="true"
class="w-6 shrink-0 text-gray-600 dark:text-gray-400 "
class="w-6 shrink-0 text-gray-600 dark:text-gray-400"
/>
</a>
</li>