From e06833065efdadf3dc98d99f4e15f9b3c63a58bc Mon Sep 17 00:00:00 2001 From: Scott Idem Date: Mon, 16 Mar 2026 15:08:24 -0400 Subject: [PATCH] style: global Lucide SVG inline flow fix in app.css MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Lucide renders elements which default to inline-block in browsers, causing icons to break onto their own line when mixed with text — unlike FA spans which were display:inline. Added svg.lucide { display: inline; vertical-align: middle; } to app.css so all Lucide icons flow inline with adjacent text globally, matching the FA icon behavior without needing class="inline" on every icon instance. Co-Authored-By: Claude Sonnet 4.6 --- src/app.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/app.css b/src/app.css index c311db8b..38e92a15 100644 --- a/src/app.css +++ b/src/app.css @@ -168,6 +168,23 @@ html.light { color-scheme: light; } background-color: rgb(55 65 81); } +/* ============================================================ + * Lucide SVG icon inline flow fix. + * + * FA icon spans were display:inline and flowed naturally with adjacent text. + * Lucide renders elements which default to inline-block in most browsers, + * causing icons to break onto their own line when mixed with text. + * + * This global rule restores the FA-equivalent behavior: icons flow inline + * with text and are vertically centered on the text baseline. + * Components that already explicitly set display:flex on their parent are + * unaffected — flex children ignore display:inline. + * ============================================================ */ +svg.lucide { + display: inline; + vertical-align: middle; +} + /* There are no more Tailwind layers. */ html,