fix(duckduckgo): prevent header logo from tiling on mobile#2267
Open
SakethKanchi wants to merge 2 commits into
Open
fix(duckduckgo): prevent header logo from tiling on mobile#2267SakethKanchi wants to merge 2 commits into
SakethKanchi wants to merge 2 commits into
Conversation
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 catppuccin#2257
Member
|
Did you use LLM-assistance for this change? That needs to be disclosed in contributions, as per our pull request template which you do not appear to have followed. |
Author
My bad on the template, I wrote my own description and didn't realize the checkbox was there. The fix itself is just the one line I added myself, but I did use AI to help write up the description. |
uncenter
requested changes
Jul 3, 2026
| '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 120 120"><g clip-path="url(#logo_header_v109_svg__a)"><path fill="@{peach}" fill-rule="evenodd" d="M60.186 120.373c33.24 0 60.187-26.947 60.187-60.187S93.426 0 60.186 0 0 26.946 0 60.186s26.946 60.187 60.186 60.187" clip-rule="evenodd"/><path fill="#DDD" fill-rule="evenodd" d="M68.65 105.091c0-.47.115-.578-1.38-3.557-3.972-7.954-7.964-19.17-6.148-26.402.33-1.314-3.742-48.66-6.62-50.185-3.2-1.705-7.138-4.41-10.739-5.012-1.827-.292-4.223-.154-6.096.098-.332.045-.346.643-.028.751 1.23.417 2.722 1.14 3.602 2.233.167.207-.057.533-.322.543-.83.03-2.334.378-4.32 2.064-.229.195-.038.557.257.499 4.267-.844 8.623-.428 11.191 1.906.167.151.08.423-.137.482-22.283 6.055-17.872 25.438-11.94 49.224 5.284 21.188 7.272 28.017 7.899 30.097a.67.67 0 0 0 .398.439c7.67 3.055 24.383 3.19 24.383-2.005z" clip-rule="evenodd"/><path fill="#fff" d="M71.706 109.558c-2.703 1.058-7.993 1.528-11.05 1.528-4.48 0-10.932-.705-13.283-1.763-1.452-4.469-5.797-18.32-10.088-35.91l-.42-1.718-.004-.014c-5.101-20.836-9.267-37.854 13.568-43.2.208-.05.31-.3.172-.463-2.62-3.108-7.528-4.127-13.734-1.986-.255.088-.476-.169-.318-.387 1.217-1.677 3.596-2.967 4.77-3.532.242-.117.228-.473-.03-.553a26 26 0 0 0-3.546-.846c-.348-.056-.38-.652-.03-.7 8.798-1.183 17.986 1.459 22.596 7.266a.3.3 0 0 0 .175.108c16.883 3.625 18.092 30.314 16.147 31.53-.384.239-1.612.102-3.233-.08-6.57-.735-19.578-2.19-8.842 17.818.106.198-.034.46-.256.494-6.054.941 1.704 19.912 7.406 32.408"/><path fill="#3CA82B" d="M79.258 85.293c-1.285-.595-6.227 2.949-9.507 5.67-.686-.97-1.978-1.675-4.894-1.168-2.551.443-3.96 1.058-4.589 2.12-4.027-1.528-10.803-3.884-12.44-1.608-1.79 2.487.447 14.257 2.824 15.785 1.24.798 7.175-3.017 10.275-5.648.5.705 1.305 1.108 2.96 1.069 2.503-.058 6.563-.64 7.193-1.806a1.3 1.3 0 0 0 .099-.25c3.186 1.191 8.792 2.451 10.045 2.263 3.264-.49-.455-15.726-1.966-16.427"/><path fill="@{green}" d="M70.051 91.31c.135.242.244.496.337.754.454 1.27 1.194 5.31.634 6.309-.56.998-4.194 1.48-6.436 1.519s-2.746-.782-3.2-2.052c-.364-1.016-.542-3.405-.538-4.773-.092-2.028.65-2.742 4.076-3.296 2.535-.41 3.876.067 4.65.883 3.6-2.686 9.606-6.478 10.192-5.785 2.92 3.455 3.29 11.68 2.657 14.99-.207 1.082-9.879-1.072-9.879-2.239 0-4.844-1.257-6.174-2.493-6.31m-21.187-1.512c.792-1.254 7.216.305 10.743 1.874 0 0-.725 3.284.429 7.151.337 1.132-8.113 6.167-9.216 5.301-1.275-1.001-3.621-11.691-1.956-14.326"/><path fill="@{yellow}" fill-rule="evenodd" d="M51.975 64.33c.52-2.26 2.941-6.519 11.587-6.415 4.371-.018 9.801-.002 13.4-.411a48.2 48.2 0 0 0 11.969-2.91c3.742-1.428 5.07-1.11 5.536-.256.512.939-.091 2.56-1.399 4.052-2.498 2.85-6.989 5.06-14.92 5.715-7.93.655-13.185-1.472-15.446 1.991-.976 1.494-.222 5.015 7.448 6.124 10.364 1.496 18.876-1.803 19.928.19 1.052 1.991-5.007 6.044-15.388 6.129s-16.865-3.635-19.164-5.484c-2.918-2.346-4.223-5.766-3.55-8.725Z" clip-rule="evenodd"/><g fill="@{blue}" opacity=".8"><path d="M65.196 39.617c.579-.948 1.863-1.68 3.964-1.68s3.09.836 3.774 1.768c.14.19-.071.413-.287.32l-.158-.069c-.769-.336-1.712-.748-3.329-.77-1.729-.025-2.819.408-3.505.781-.232.126-.596-.125-.46-.35ZM41.539 40.83c2.04-.853 3.644-.743 4.777-.474.24.056.405-.2.214-.355-.88-.71-2.85-1.59-5.418-.633-2.29.854-3.37 2.63-3.377 3.796-.002.276.564.299.71.066.396-.63 1.053-1.547 3.094-2.4"/><path fill-rule="evenodd" d="M70.945 52.588a3.263 3.263 0 0 1-3.267-3.255 3.263 3.263 0 0 1 3.267-3.255 3.26 3.26 0 0 1 3.267 3.255 3.26 3.26 0 0 1-3.267 3.255m2.301-4.334a.845.845 0 0 0-1.692 0 .845.845 0 0 0 1.692 0M49.3 51.585a3.8 3.8 0 0 1-3.809 3.796c-2.1 0-3.808-1.7-3.808-3.796a3.804 3.804 0 0 1 3.808-3.796c2.1 0 3.809 1.7 3.809 3.796m-1.123-1.258a.987.987 0 0 0-1.972 0c0 .54.44.982.986.982a.985.985 0 0 0 .986-.982" clip-rule="evenodd"/></g><path fill="#fff" fill-rule="evenodd" d="M60.186 110.733c27.917 0 50.548-22.63 50.548-50.547S88.103 9.639 60.186 9.639C32.27 9.64 9.64 32.27 9.64 60.186c0 27.917 22.631 50.547 50.547 50.547Zm0 4.702c30.514 0 55.25-24.735 55.25-55.249 0-30.513-24.736-55.249-55.25-55.249S4.937 29.673 4.937 60.187s24.736 55.248 55.25 55.248Z" clip-rule="evenodd"/></g></svg>' | ||
| ); | ||
| background-image: url("data:image/svg+xml,@{svg}") !important; | ||
| background-repeat: no-repeat !important; |
Member
There was a problem hiding this comment.
This works, but I think we are missing a better solution. Look at where the original Duckduckgo styles set background-image — they do it on .header__logo-icon, whereas we are setting it here on .header__logo/.js-logo-ddg. The element we are setting the background image on is the parent of .header__logo-icon, and so we don't inherit the background-repeat: no-repeat; line that Duckduckgo's default styles already give us!
…ts 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.
Author
|
Yeah, good call, thanks. Moved the themed image onto I left the parent |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
On mobile, the DuckDuckGo header logo is repeated several times (reported in #2257). The
.header__logo/.js-logo-ddgrule sets abackground-image(the Catppuccin SVG logo) but never setsbackground-repeat, so on the taller/wider logo container used on mobile the SVG tiles instead of showing once.Fix
Add
background-repeat: no-repeat !important;to the header logo selectors. A logo background should never tile, so this is safe on desktop as well (where the container happened to match the image size, hiding the bug).Testing
deno task lint duckduckgopasses.Closes #2257