thgtoa/memory/footer-social-inline-fix.md

name, description, metadata

name	description	metadata
footer-social-inline-fix	Social icons now display inline on same line instead of wrapping (including Codeberg)	type category affects project styling 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