MyClub/DOCS/LOGO_SIZING_FIX.md

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