upload

DOCS/LOGO_SIZING_FIX.md

@@ -0,0 +1,47 @@
+# Logo Sizing Fix
+
+## Problem
+SVG logos from logoapi.sportcreative.eu were being displayed too large in circular containers, causing them to be cut off by the circular border.
+
+## Solution
+Implemented a comprehensive fix that includes:
+
+### 1. CSS Updates (`frontend/src/styles/logos.css`)
+- Added specific styles for SVG logos in circular containers
+- Added padding to prevent cutoff
+- Added utility classes for consistent logo display
+
+### 2. Utility Functions (`frontend/src/utils/logoUtils.ts`)
+- `isLogoApiUrl()` - Detects logoapi URLs
+- `getLogoStyle()` - Returns appropriate styling based on logo source and container type
+- `getLogoClassName()` - Returns appropriate CSS classes
+- `getLogoProps()` - Returns complete props for Chakra UI Image components
+
+### 3. Component Updates
+- **TeamLogo component**: Now uses utility functions for consistent styling
+- **ClubModal component**: Added padding for logoapi SVGs in circular containers
+- **Navbar component**: Added padding for logoapi SVGs in circular containers
+- **MatchesPage**: Added padding for logoapi SVGs in match displays
+
+### 4. Key Changes
+- Changed `objectFit` from `cover` to `contain` for better logo display
+- Added conditional padding (4-6px) for logoapi SVGs in circular containers
+- Added `boxSizing: border-box` to ensure proper sizing calculations
+
+## Usage
+The fix is automatically applied to all components that display logos. No additional configuration is needed.
+
+## Testing
+To test the fix:
+1. Navigate to any page with team logos
+2. Verify that SVG logos from logoapi are properly sized within circular containers
+3. Check that logos are not cut off by the circular border
+4. Ensure logos maintain their aspect ratio
+
+## Files Modified
+- `frontend/src/styles/logos.css`
+- `frontend/src/utils/logoUtils.ts` (new)
+- `frontend/src/components/common/TeamLogo.tsx`
+- `frontend/src/components/home/ClubModal.tsx`
+- `frontend/src/components/Navbar.tsx`
+- `frontend/src/pages/MatchesPage.tsx`