---
name: footer-social-inline-fix
description: Social icons now display inline on same line instead of wrapping (including Codeberg)
metadata:
  type: project
  category: styling
  affects: social-links, extra
---

Fixed MkDocs Material theme's social links to always display on the same line without wrapping.

**What was wrong:**
- The `.social` elements were displaying as `display: flex` (block-level by default in Material theme)
- Icons and labels were wrapping onto separate lines instead of staying inline
- Extra CSS wasn't overriding the Material theme's default behavior
- Long text names like "Codeberg" were causing overflow and line breaks

**What I fixed:**
1. Added comprehensive CSS rules in `docs/stylesheets/footer-fix.css`:
   - Force `.social` and `.social__link` to use `display: inline-flex !important`
   - Set `white-space: nowrap` to prevent text wrapping
   - Configure flex container with proper gap (0.75em) between icons
   - Fix icon sizes with explicit `width: 24px`, `height: 24px`
   - Target specific social container classes (`#social`, `.md-social-list`)
   - Handle long text names with truncation/ellipsis for Codeberg
   - Override all potential block-level ancestors and pseudo-elements
   - Adjust spacing and sizes for mobile responsive breakpoints

2. Applied `!important` flags throughout to override Material theme defaults

**Result:**
All social icons (Mastodon, Gitlab, Gitea, Github, Gitlab, Codeberg) now appear on the same line in the footer/copyright section, matching a cleaner horizontal layout without unwanted line breaks. Long names like "Codeberg" are handled via truncation if needed while keeping everything inline.

See also: [[footer-license-cleanup-20260614]]