Icons overlap in narrow window with tabs toolbar hidden

[dekatr0n]

I'm using window_control_placeholder_support.css together with hide_tabs_toolbar.css, but I noticed that it does not handle narrow window widths very well. The application menu icon overlaps with the other icons and url bar when the window becomes too small. I'm using Windows 10.

Normal window:

Narrow window:

[MrOtherGuy]

Yeah, this is sort of annoying, but I'm not sure what a good behavior would be. We could let urlbar get narrower than the current limit and it would look more neat but I don't think it's sane to have urlbar be unusably narrow. We cannot make Firefox push navigation buttons to overflow menu either, and we don't want to hide them as they are rather crucial part of the UI, same applies to window controls.

There just isn't enough space in narrow windows to show everything. What would be a good behavior in your opinion?

[dekatr0n]

I've replaced this code in window_control_placeholder_support.css

#nav-bar {
  border-inline: var(--uc-window-drag-space-pre,0px) solid transparent;
  border-inline-style: solid !important;
  border-right-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px));
  background-clip: border-box !important;
}

with the following

#nav-bar {
  padding-left: var(--uc-window-drag-space-pre,0px) !important;
  padding-right: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px)) !important;
}

and noticed that it somewhat helps. The layout still overlaps at narrow widths, but the width at which it starts overlapping is decreased. Now, it doesn't overlap when tiling a window to one half of my screen (1080p, 125% scaling), which is an improvement for me.

About good behaviour for narrow widths, I couldn't really think of a good solution. For reference, I noticed that MS Edge hides the navigation icons when the window is too narrow. Another idea is to reintroduce a (thin) title bar at the top at narrow widths to accommodate the window controls, like Firefox Nightly with vertical tabs enabled, but I don't know if this is a good solution (maybe it defeats the whole point of hiding the tab bar).

[MrOtherGuy]

This requires some thought. I know that using padding instead of border makes intuitively more sense, but I know there is some very specific reason for why we use border - I just cannot recall off the top of my head what that reason is. There's also a chance that the issue with using padding isn't relevant any more.

Even so, switching to using padding requires me to test a lot of styles and interactions so I'm not able to change that without some careful testing which would take some time.

I would be glad if we can switch to using padding though.

[datguypiko]

This requires some thought..

What are your thoughts on just using flex for dealing with oneliner. It avoids most of these issues. The only thing I didnt bother fixing was secondary menu bar (alt) (#toolbar-menubar) as I dont use it ever, which can be fixed with just making it absolute and moving above all of them. (Preview pictures below)

/* Right side buttons - padding */
/* #titlebar {padding-right: 100px !important;} */

/* Left side buttons - padding */
/* #nav-bar {padding-left: 100px !important;} */

/* Right side buttons when tabs on left side, 'unset' everything else */
/* #navigator-toolbox { padding-right: 100px !important;} */ 

@media (min-width:1000px) {
  #navigator-toolbox { display: flex; flex-wrap: wrap; flex-direction: row; }

  #nav-bar {
    order: 1; /* change this and #titlebar order to flip them */
    flex:fit-content;
    flex-grow: 1.5; /* Increase for searchbar to have more space */
  }
  
  #nav-bar #urlbar-container { 
    /* Not necessary just helps limit size to your needs more  */
    min-width: 260px !important; /* Set to 0 or unset if tabs hidden/collapsed */
    width: auto !important; 
  }

  #titlebar {
    order: 2; /* change this and #nav-bar order to flip them */
    flex:fit-content;
    flex-grow: 8; /* Increase for tabs to have more space */
  }

  #PersonalToolbar { order: 3; width: 100%;}
  
}
/* Fixes oneliner in customization view */
#customization-panelWrapper > .panel-arrowbox > .panel-arrow{ margin-inline-end: initial !important; }

Or this Code that lets you set custom width more accurately yourself

Code ->>>

:root {
 --uc-urlbar-min-width: 45vw;
 --uc-urlbar-max-width: 45vw;
}

@media (min-width:1100px) {

#navigator-toolbox { display: flex; flex-wrap: wrap; flex-direction: row; }

#nav-bar {
  order: 1;
  width: var(--uc-urlbar-min-width);
}

#nav-bar #urlbar-container { min-width: unset !important; width: auto !important; }

#titlebar {
  order: 2;
  width: calc(100vw - var(--uc-urlbar-min-width) - 1px);
}

#PersonalToolbar {
  order: 3;
  width: 100%;
}

#navigator-toolbox:focus-within {
  & #nav-bar { 
    width: var(--uc-urlbar-max-width); 
  }
  
  & #titlebar { 
    width: calc(100vw - var(--uc-urlbar-max-width) - 1px); 
  } 
}

}

/* Fixes oneliner in customization view */
#customization-panelWrapper > .panel-arrowbox > .panel-arrow{ margin-inline-end: initial !important; }

Preview

Setting width to very short still doesnt overlap

By collapsing tabs, need to set min-width to 0 or unset

By just changing #nav-bar order to 2 and #titlebar to 1 you flip them with no effort (haven't tested this much)
If you cant press on control buttons need to probably set #navigator-toolbox padding instead of #titlebar.

[MrOtherGuy]

I haven't really thought about that in a long time, I believe this didn't work well back when everything was using xul box layout, but now it seems to work pretty well at first glance. That's cool. But there will still be an issue with window control buttons that different systems may have them on another side - for example on mac they are on left side. To deal with that we would need to resort to same kinds of hackery that we are doing now anyway, I think.