From 1b0fbaf81a90220ae9e9a8f2834041239999dc02 Mon Sep 17 00:00:00 2001
From: Zack Spear <zackspear@users.noreply.github.com>
Date: Fri, 14 Mar 2025 07:05:32 -0700
Subject: [PATCH] fix: update brand loading variants for consistent sizing
 (#1223)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I was seeing strange behavior on /Tools/Registration when forcing the
check that happens on page load to fire again. The brand logo SVG was
rendering very large. So I set the size to small. But the SVG was still
rendering strangely due to the square width and height classes.

In the SVG source code, I took `viewBox="0 0 133.52 76.97"` and
converted that to an aspect ratio, `133.52/76.97`. And for simpler
integers - `133.52/76.97 ≈ 1.735` which is close to `7/4 (1.75)`. So we
can use - `aspect-[7/4]`.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Style**
- Enhanced the brand loading component’s appearance by enforcing a
consistent aspect ratio and streamlining its dimension settings to focus
solely on width parameters.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../src/components/brand/brand-loading.variants.ts     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/unraid-ui/src/components/brand/brand-loading.variants.ts b/unraid-ui/src/components/brand/brand-loading.variants.ts
index dfa71b84a..9459dab42 100644
--- a/unraid-ui/src/components/brand/brand-loading.variants.ts
+++ b/unraid-ui/src/components/brand/brand-loading.variants.ts
@@ -1,6 +1,6 @@
 import { cva } from 'class-variance-authority';
 
-export const brandLoadingVariants = cva('inline-flex items-center justify-center w-full h-full', {
+export const brandLoadingVariants = cva('inline-flex items-center justify-center w-full h-full aspect-[7/4]', {
   variants: {
     variant: {
       default: '',
@@ -8,10 +8,10 @@ export const brandLoadingVariants = cva('inline-flex items-center justify-center
       white: 'text-white fill-white',
     },
     size: {
-      sm: 'h-12 w-12',
-      md: 'h-16 w-16',
-      lg: 'h-20 w-20',
-      full: 'h-full w-full',
+      sm: 'w-12',
+      md: 'w-16',
+      lg: 'w-20',
+      full: 'w-full',
     },
   },
   defaultVariants: {