From 4584cfb8dab56f407472e978db9cdab94fdee0ed Mon Sep 17 00:00:00 2001 From: Saketh Kanchi Date: Wed, 1 Jul 2026 20:43:08 -0400 Subject: [PATCH 1/2] fix(duckduckgo): prevent header logo from tiling on mobile The header logo background-image had no background-repeat, so on mobile (taller logo container) the SVG tiled and repeated several times. Add background-repeat: no-repeat to .header__logo / .js-logo-ddg. Closes #2257 --- styles/duckduckgo/catppuccin.user.less | 1 + 1 file changed, 1 insertion(+) diff --git a/styles/duckduckgo/catppuccin.user.less b/styles/duckduckgo/catppuccin.user.less index 6f3f492c96..c817528834 100644 --- a/styles/duckduckgo/catppuccin.user.less +++ b/styles/duckduckgo/catppuccin.user.less @@ -1081,6 +1081,7 @@ '' ); background-image: url("data:image/svg+xml,@{svg}") !important; + background-repeat: no-repeat !important; } .yhccgqM_FdvJ79N6Jm6c { From de090858ab35f364ab699ecaed379ed1e13802f9 Mon Sep 17 00:00:00 2001 From: sakethkanchi Date: Sat, 4 Jul 2026 02:20:52 -0400 Subject: [PATCH 2/2] fix(duckduckgo): theme header logo on .header__logo-icon so it inherits DDG's no-repeat Instead of forcing background-repeat: no-repeat on the parent .header__logo, also set our themed background-image on the .header__logo-icon child that DDG paints on mobile (it already has no-repeat), and blank the parent on mobile the same way DDG does. This removes the !important repeat band-aid, stops the tiling, and also fixes the mobile logo showing DDG's default (un-themed) icon. --- styles/duckduckgo/catppuccin.user.less | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/styles/duckduckgo/catppuccin.user.less b/styles/duckduckgo/catppuccin.user.less index c817528834..3b48714382 100644 --- a/styles/duckduckgo/catppuccin.user.less +++ b/styles/duckduckgo/catppuccin.user.less @@ -1076,12 +1076,25 @@ background-image: url("data:image/svg+xml,@{svg}"); } //ddg icon .header__logo, - .js-logo-ddg { + .js-logo-ddg, + .header__logo-icon, + .js-logo-icon { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}") !important; - background-repeat: no-repeat !important; + } + + // On mobile DuckDuckGo paints the header logo on `.header__logo-icon` (which + // already carries `background-repeat: no-repeat`) and blanks the parent + // `.header__logo` with `background: none`. Re-blank the parent here so our + // themed image only lives on the icon and inherits DDG's `no-repeat`, + // instead of overriding that reset and tiling across the wider parent (#2257). + &.is-mobile { + .header__logo, + .js-logo-ddg { + background-image: none !important; + } } .yhccgqM_FdvJ79N6Jm6c {