feat: add responsive layout to broken asset (#26384)

This commit is contained in:
Min Idzelis
2026-03-02 09:27:40 -05:00
committed by GitHub
parent 062546c168
commit 8619d14eca
4 changed files with 373 additions and 3 deletions

View File

@@ -15,15 +15,18 @@
</script>
<div
data-broken-asset
class={[
'flex flex-col overflow-hidden max-h-full max-w-full justify-center items-center bg-gray-100/40 dark:bg-gray-700/40 dark:text-gray-100 p-4',
'@container flex flex-col overflow-hidden max-h-full max-w-full justify-center items-center bg-gray-100/40 dark:bg-gray-700/40 dark:text-gray-100 p-4',
className,
]}
style:width
style:height
>
<Icon icon={mdiImageBrokenVariant} size="7em" class="max-w-full" />
<div class="hidden @min-[75px]:block">
<Icon icon={mdiImageBrokenVariant} size="7em" class="max-w-full min-w-6 min-h-6" />
</div>
{#if !hideMessage}
<span class="text-center">{$t('error_loading_image')}</span>
<span class="text-center text-xs @min-[100px]:text-sm @min-[150px]:text-base">{$t('error_loading_image')}</span>
{/if}
</div>