www.blogger.com - “Navbar” section is displayed truncated

[softvision-oana-arbuzov]

URL: https://www.blogger.com/blogger.g?blogID=2182385337026209900#allposts

Browser / Version: Firefox Nightly 66.0a1 (2019-01-24) Operating System: Windows 10 Pro Tested Another Browser: Yes

Problem type: Design is broken Description: “Navbar” section is displayed truncated

Prerequisites:

1. Google account created and signed in. Steps to Reproduce:
2. Navigate to https://www.blogger.com/blogger.g?blogID=2182385337026209900#allposts
3. Click “Layout”.
4. Observe “Navbar” section.

Expected Behavior: Section is fully visible and “Navbar gadget” text is displayed.

Actual Behavior: Section is truncated and “Navbar gadget” text is not visible.

Note

1. Not reproducible on Chrome 71.0.3578.99.
2. Screenshot attached. Affected area:

   <div class="widget-content">
   <div class="layout-title">
   Navbar
   </div>
   <div class="layout-widget-description" title="">
   Navbar gadget
   </div>
   <a class="editlink" href="//www.blogger.com/rearrange?blogID=2182385337026209900&amp;widgetType=Navbar&amp;widgetId=Navbar1&amp;action=editWidget&amp;sectionId=navbar" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;Navbar1&quot;));" target="chooseWidget">
   Edit
   </a>
   </div>

Watchers: @softvision-oana-arbuzov @softvision-sergiulogigan @cipriansv

sv;

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Suggestion: Removing height: 3em;, the section becomes fully visible and does not affect Chrome.

body#layout #navbar .Navbar .widget-content {
    height: 3em;
}

[karlcow]

This is part of an iframe. https://www.blogger.com/display?blogID=2182385337026209900&mode=layout-v2&security_token=AOuZoY4BbviUJ-Hz-vsB6Z8bDaxpBI759w:1548633835213

With a Chrome user agent we receive the same CSS for this part. So it's probably a difference of behavior in between Firefox and Chrome or a leftover in the CSS.

That's it, even chrome receives…

* {
    -moz-box-sizing: border-box;
}

which has no effect in Chrome, but has in Firefox. if I remove this I get the same layout than in Chrome.

To contact in the same batch than #24861

[softvision-oana-arbuzov]

The issue has been fixed. The section is displayed correctly now.

Tested with: Browser / Version: Firefox Nightly 107.0a1 (2022-10-05) Operating System: Windows 10 Pro

[inv_40/2022]