From 0d84610e3be11118d695b1f0c317692128af83b3 Mon Sep 17 00:00:00 2001
From: Michelle <michelle.winkler@miichelle.moe>
Date: Wed, 4 Mar 2026 10:23:23 +0100
Subject: [PATCH] feat(BrandLogo): enhance logo sizing and visibility based on
 app name visibility

---
 src/components/BrandLogo.jsx | 19 ++++++++++---------
 src/components/Sidebar.jsx   |  2 +-
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/BrandLogo.jsx b/src/components/BrandLogo.jsx
index 5964e6c..6a5405c 100644
--- a/src/components/BrandLogo.jsx
+++ b/src/components/BrandLogo.jsx
@@ -2,9 +2,9 @@ import { Video } from 'lucide-react';
 import { useBranding } from '../contexts/BrandingContext';
 
 const sizes = {
-  sm: { box: 'w-8 h-8', rounded: 'rounded-lg', icon: 16, text: 'text-lg' },
-  md: { box: 'w-9 h-9', rounded: 'rounded-lg', icon: 20, text: 'text-xl' },
-  lg: { box: 'w-10 h-10', rounded: 'rounded-xl', icon: 22, text: 'text-2xl' },
+  sm: { box: 'w-8 h-8', h: 'h-8', maxW: 'max-w-[8rem]', rounded: 'rounded-lg', icon: 16, text: 'text-lg' },
+  md: { box: 'w-9 h-9', h: 'h-9', maxW: 'max-w-[10rem]', rounded: 'rounded-lg', icon: 20, text: 'text-xl' },
+  lg: { box: 'w-10 h-10', h: 'h-10', maxW: 'max-w-[12rem]', rounded: 'rounded-xl', icon: 22, text: 'text-2xl' },
 };
 
 export default function BrandLogo({ size = 'md', className = '' }) {
@@ -12,13 +12,14 @@ export default function BrandLogo({ size = 'md', className = '' }) {
   const s = sizes[size] || sizes.md;
 
   if (hasLogo && logoUrl) {
+    // When the app name is hidden, let the logo expand to its natural aspect
+    // ratio (w-auto) rather than being clamped into a tiny square.
+    const imgClass = hideAppName
+      ? `${s.h} w-auto ${s.maxW} ${s.rounded} object-contain`
+      : `${s.box} ${s.rounded} object-contain`;
     return (
-      <div className={`flex items-center gap-2.5 ${className}`}>
-        <img
-          src={logoUrl}
-          alt={appName}
-          className={`${s.box} ${s.rounded} object-contain`}
-        />
+      <div className={`flex items-center ${hideAppName ? 'justify-center' : 'gap-2.5'} ${className}`}>
+        <img src={logoUrl} alt={appName} className={imgClass} />
         {!hideAppName && <span className={`${s.text} font-bold gradient-text`}>{appName}</span>}
       </div>
     );
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index 70087db..24f1f88 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -57,7 +57,7 @@ export default function Sidebar({ open, onClose }) {
         <div className="flex flex-col h-full">
           {/* Logo */}
           <div className="flex items-center justify-between h-16 px-4 border-b border-th-border">
-            <BrandLogo size="sm" />
+            <BrandLogo size="sm" className="flex-1 min-w-0" />
             <button
               onClick={onClose}
               className="lg:hidden p-1.5 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"