address bar input mode overflows sidebar

[luutuankiet]

Describe the bug
Just today my address bar when expanded overflows the sideberry bar as screenshot shown.

To Reproduce
I'm not sure if this has to do with sideberry or conflicts in my config, or a firefox update.
Can you point me to where I might troubleshoot this issue?

Expected behavior
The expanded address bar should not overflow sideberry's sidebar

Screenshots

Desktop (please complete the following information):

• OS: MacOS 14.6.1
• Browser : Firefox
• Version : 133.0

Additional context
I've done a fresh install of this addon from the top, issue still persists

1. renamed current chrome folder
2. git clone the repo
3. copy the repo chrome in place of the old one.

[luutuankiet]

this went away if I commented the urlbar.css import from userChrome.css :

/* Edge-Frfox main files */
@import url("icons/icons.css");
@import url("toolbar/tabbar.css");
@import url("toolbar/navbar.css");
@import url("toolbar/personalbar.css");
@import url("toolbar/findbar.css");
/*@import url("toolbar/urlbar.css");*/ /* <<<< commenting this out fixed it */
@import url("global/colors.css");
@import url("global/popup.css");
@import url("global/browser.css");
@import url("global/tree.css");

/* Edge-Frfox tweaks */
@import url("global/tweaks.css");
@import url("tweaks/hide-tabs-bar.css") (-moz-bool-pref: "uc.tweak.hide-tabs-bar");

/* Import custom stylesheet instead of modifying Edge-Frfox theme files. */
@import url("custom.css");

[hastors]

@luutuankiet

/* Edge-Frfox main files /
@import url("icons/icons.css");
@import url("toolbar/tabbar.css");
@import url("toolbar/navbar.css");
@import url("toolbar/personalbar.css");
@import url("toolbar/findbar.css");
/@import url("toolbar/urlbar.css");/ / <<<< commenting this out fixed it */
@import url("global/colors.css");
@import url("global/popup.css");
@import url("global/browser.css");
@import url("global/tree.css");

/* Edge-Frfox tweaks */
@import url("global/tweaks.css");
@import url("tweaks/hide-tabs-bar.css") (-moz-bool-pref: "uc.tweak.hide-tabs-bar");

/* Import custom stylesheet instead of modifying Edge-Frfox theme files. */
@import url("custom.css");
`

With these settings, when the sidebar is collapsed, this configuration prevents it from expanding when the cursor hovers over itcursor.

[luutuankiet]

@hastors thanks for checking in - but could you review your code snippet response again as it's identical to the original code I posted?

[luutuankiet]

tweaked this line in file chrome/toolbar/urlbar.css seems to help. I dont' have much experience with css, would be great if anyone can point me to how this worked

#urlbar[breakout][breakout-extend] {
  /* left: 0 !important; */
  width: 80% !important;
}

[luklokkes]

tweaked this line in file chrome/toolbar/urlbar.css seems to help. I dont' have much experience with css, would be great if anyone can point me to how this worked

#urlbar[breakout][breakout-extend] {
  /* left: 0 !important; */
  width: 80% !important;
}

Worked for me, thank you!