N°9447 - Setup logo is repeating vertically

[steffunky]

Base information

Question	Answer
Related to a SourceForge thread / Another PR / Combodo ticket?	N°9447
Type of change?	Bug fix

Symptom (bug) / Objective (enhancement)

Setup logo is repeating vertically in the header

Reproduction procedure (bug)

1. On iTop 3.2.3, open setup page

Cause (bug)

#816 changed how title icons were displayed, but it lacked some rules for regular title and focused only on panel title

Proposed solution (bug and enhancement)

Use the same markup as panel title in regular title, and add rules that focus on img element instead of background

Checklist before requesting a review

• I have performed a self-review of my code
• I have tested all changes I made on an iTop instance
• I have added a visual test
• Is the PR clear and detailed enough so anyone can understand digging in the code?

[greptile-apps]

Greptile Summary

This PR fixes the setup logo repeating vertically by replacing the <div> with inline background-image in the title template with a proper <img> element (matching the panel template), and adds missing object-fit properties to the title SCSS so that contain and cover modes work correctly for <img> elements. The setup.css compiled output and a manual visual test are also updated.

Confidence Score: 5/5

• Safe to merge — the core bug is properly fixed; remaining findings are minor P2 style issues.
• The reported bug (logo repeating) is correctly resolved by switching from a background-image div to an img element. Both remaining findings are P2: the zoomout case is defined but not used anywhere in production for the Title component, and the data-role copy-paste has no functional impact.
• css/backoffice/components/_title.scss — the --must-zoomout rule should mirror the panel's width/height approach for img elements.

Important Files Changed

Filename	Overview
css/backoffice/components/_title.scss	Adds object-fit to base, --must-contain, and --must-cover rules to support <img> elements; --must-zoomout still only sets background-size which has no effect on <img>.
templates/base/components/title/layout.html.twig	Switches icon from a <div> with inline background-image (which caused vertical repeating) to a proper <img> element, matching the panel template approach; data-role is incorrectly set to ibo-panel--icon-img.
css/setup.css	Compiled/minified CSS updated to include the new object-fit properties for title icon rules; reflects the SCSS changes correctly.
tests/manual-visual-tests/Backoffice/RenderAllUiBlocks.php	Expands the title visual test to include an icon-bearing title (class icon and branding logo), replacing the unused level-5 heading example with more representative test cases.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Title component with icon] --> B{Icon rendering}
    
    B -->|Before PR| C["<div> with style='background-image: url(...)'"]
    B -->|After PR| D["<img src='...' class='ibo-title--icon-background'>"]
    
    C --> E["No background-repeat: no-repeat set\n→ image tiles/repeats vertically"]
    D --> F["Direct image element\n→ no tiling, object-fit: contain applied"]
    
    F --> G{Cover method}
    G -->|contain| H["object-fit: contain ✅"]
    G -->|cover| I["object-fit: cover ✅"]
    G -->|zoomout| J["background-size: 66.67% only\n→ no effect on img ⚠️\n(width/height not set)"]

Loading

Comments Outside Diff (1)

1. css/backoffice/components/_title.scss, line 68-70 (link)

   Missing <img> sizing fix for --must-zoomout

   The --must-zoomout rule still only sets background-size: 66.67%, which has no effect on <img> elements. The parallel panel SCSS (_panel.scss lines 201–204) fixes this by using width and height instead. Since the twig template now renders an <img>, icons configured with the zoomout method will appear at full size rather than the intended 66.67%, silently losing the zoom-out visual effect.

_{Reviews (1): Last reviewed commit: "N°9447 - Setup logo is repeating vertica..." | Re-trigger Greptile}

[steffunky]

@greptileai Could you suggest a fix for your P2 issue ?

[greptile-apps]

The P2 issue is the incorrect data-role attribute — it was copy-pasted from the panel template but this is a title element. data-role="ibo-panel--icon-img" should be data-role="ibo-title--icon-img".

Here's the fix for line 7 of templates/base/components/title/layout.html.twig:

                 data-role="ibo-title--icon-img" src="{{ oUIBlock.GetIconUrl()|raw }}" alt="" aria-hidden="true"/>

Tip: You can customize Greptile's behavior for this repo with .greptile/rules and .greptile/config.