From 49ad3618a824e48a90d41a400bd087e020163841 Mon Sep 17 00:00:00 2001
From: Psychotoxical <171614930+Psychotoxical@users.noreply.github.com>
Date: Sun, 7 Jun 2026 21:26:19 +0200
Subject: [PATCH] fix(themes): show animated-theme warning on the thumbnail in
 My Themes (#1022)

---
 src/components/settings/InstalledThemes.tsx | 35 ++++++++++++++-------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/components/settings/InstalledThemes.tsx b/src/components/settings/InstalledThemes.tsx
index ccb33635..a068bd0d 100644
--- a/src/components/settings/InstalledThemes.tsx
+++ b/src/components/settings/InstalledThemes.tsx
@@ -80,6 +80,30 @@ export function InstalledThemes() {
                       <Check size={8} strokeWidth={3} color="white" />
                     </div>
                   )}
+                  {animRisk && c.animated && (
+                    <span
+                      role="img"
+                      aria-label={t('settings.themeAnimationWarning')}
+                      data-tooltip={t('settings.themeAnimationWarning')}
+                      data-tooltip-pos="top"
+                      style={{
+                        position: 'absolute',
+                        bottom: '3px',
+                        right: '3px',
+                        width: '16px',
+                        height: '16px',
+                        borderRadius: '50%',
+                        background: 'var(--bg-elevated)',
+                        color: 'var(--warning)',
+                        border: '1px solid var(--warning)',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                      }}
+                    >
+                      <AlertTriangle size={10} />
+                    </span>
+                  )}
                 </div>
                 <span className={`theme-card-label${isActive ? ' is-active' : ''}`}>
                   {c.label}
@@ -104,17 +128,6 @@ export function InstalledThemes() {
                     CVD-safe
                   </span>
                 )}
-                {animRisk && c.animated && (
-                  <span
-                    role="img"
-                    aria-label={t('settings.themeAnimationWarning')}
-                    data-tooltip={t('settings.themeAnimationWarning')}
-                    data-tooltip-pos="top"
-                    style={{ display: 'inline-flex', color: 'var(--warning)', marginTop: 2 }}
-                  >
-                    <AlertTriangle size={12} />
-                  </span>
-                )}
               </button>
               {!c.fixed && (
                 <button