# 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`
