How to resize TopNavigation Identity display

[suvihaara]

Hi,

I had an issue where when an SVG is scaled in % rather than a value, the TopNavigation title is truncated. I fixed it by changing the scaling of the SVG to be set in values rather than %. Is there a way that would allows the TopNavigation Logo SVGs to be scaled in % without truncating the title?

[timogasda]

Hi @suvihaara ! I'm not sure I completely understand. Could you please provide an example SVG with % and with values? And some screenshots of how those looked for you?

[suvihaara]

Hi @timogasda! No problem, hope this message will clarify the issue.

The original SVG file I downloaded to use as the logo file for the TopNavigation component had the following format:
SVG format checks did not raise any issues about the SVG height and width being set as percentages on line 10. This format resulted in the title of the web-page to truncate:

I spent quite a while trying to figure out why the title of the page was truncated in this manner. When I changed the width and height of the SVG on line 10 into this format:

The logo and title displayed correctly:

I just wanted to raise awareness of this in case there is a way to prevent the same issue from happening again. It was an easy thing to fix once I happened to stumble on the cause of it, but the cause was a bit of a random bug.

Hope this explains the issue I had a bit better.

[Domt301]

Ran into the same issue and used this useEffect(() => { const span = document.getElementsByClassName("awsui_title_k5dlb_1a945_195")[0] span.style.overflow = "visible" }, []);
like a caveperson lmao

[YueyingLu]

Converted this into an issue #704. Let's move the conversation here.

[taheramr]

Copying my reply in the opened issue here for visibility:

Sorry for the late replies on this bug, this PR should fix the issue with the top navigation and full width/height svg logos.

Will followup when this is merged.
@suvihaara @Domt301