Solved Broken tabs bar on the left when resizing

Chosin137

Anyone else see this issue if they switch to left Aligned tab bar? Like the width of the tab bar on the left side is to small and you should be able to drag the bar out a little to make it bigger and the webpage over.

//MODEDIT: merged duplicated threads, bug reported as VB-88017. Related issue: Cannot change the width of vertical tabs

thwbn

same problem here!

Thank you!
greetings Thorsten

Pesala

@devindev No such problem here on the latest Stable build.

Title should be:

Cannot place the tabs on the left side

If you can NOT place them on the left side, that means that you can place them on any side of the window, i.e. you do not have to place them on the left.

Please follow the troubleshooting steps.

Priest72

Windows specific issue?
Works just fine here on linux.

guigirl

@devindev And in a clean test profile?

nhks

Yes same problem for me. Since the last upgrade.
My version is: 5.2.2623.26

Update: After some analysis with the devtool

I could see that the tabbar ( div#tabs-tabbar-container ) was present, but its width was set to 1px.

It is possible to change it and restart vivaldi.
However, the resizing isn't very pretty, when you drag the tab bar, the web content stays static and its position isn't set until the button is released
eg, on resize, you can see the background here:

Pathduck

Yes, looks like a bug in 5.2. Please make a report.

Note that you can still resize the bar, it's just really wonky.
Video: https://ttm.sh/bby.mp4

Right side seems to work as expected.
Also note that there is a hard limit to how wide it can be.

Please read:

carefully and report the bug to Vivaldi bugtracker

nhks

@pathduck Exactly this after redefining the tabbar width for me. The video is more clear than my explanation

scampbll

I just came to report the same problem. I can't find the offset drag handle as shown in the video, though. Maybe because I accidentally dragged too far left and covered up most of the tab bar?

Update: digging into the CSS, it wasn't tabs-tabbar-container that I had to tweak, but the preceding div with no id. Width was 6px, changing it back to 30 has fixed it for now.

Bolt1955

Same problem Is there a way to uninstall this version and re-install the prior version while preserving bookmarks, extensions, etc.?

Pathduck

@scampbll said in Left Aligned Tab Bar clipped by webpage:

Maybe because I accidentally dragged too far left and covered up most of the tab bar?

If you do this by accident, set tabs to the other side (right/left) and resize it, the l/r tab bars use the same size. And yes, it's a bug, it should not be possible to resize smaller than the icon size.

@Bolt1955 Is your problem that you can't restore the width of the tabs bar? Then please try the above possible solution. Going back to a previous version is not supported and might corrupt your profile data.

By the way, nothing will happen unless someone reports a bug. I don't use L/R tabs so I don't care anyway...

nomadic

Looks like it can temporarily be fixed by using a CSS mod and adding this:

#panels-container + div {
    width: unset !important;
}

Adding that should get Vivaldi to ignore the problematic width being set for the tab bar.

* Below is meant for discussion purposes only and not a suggestion that you should edit `bundle.js` to fix this bug on your computer. It is too easy to accidentally break something if you don't know what you are doing, so stick to the CSS modification fix I provided above until Vivaldi provides an official fix. *

I also got a bit curious and did some digging around in bundle.js to see if I could find the cause.

The root of the issue seems to be that the left set tab bar now has a wrapper DIV around it that has a set width. The width of this wrapper doesn't get updated until the resizing of the tab bar finishes, so the rest of the UI can't adapt until the dragging is finished. It is also redundant as the actual tab bar has a width that updates in real time as you resize it.

As others have pointed out, it also will update the width without taking into account the minimum width of the tab bar, and if you have the panel visible on the left, then it will fail to update if you drag the handle past the left edge of the tab bar. In this last case, the preference that holds the tab bar width becomes negative.

Image showing the tab bar width preference going to a negative value.

Looking at the bundle.js file from before version 5.2, we can see that the wrapper around the tab bar doesn't exist:

Pre 5.2 code

...
s.createElement(Y4, {
  key: "panel",
  position: e[P.kPanelsPosition],
  outsideClickIgnoreClass: "panel-clickoutside-ignore",
  __source: {
    fileName: N8,
    lineNumber: 1186,
    columnNumber: 13,
  },
}),
"left" === i &&
  l.tabs &&
  s.createElement($7, {
    key: "tabbar",
    switchTabVisualTabSwitcher: this.switchTabVisualTabSwitcher,
    mainDialogType: this.state.mainDialogType,
    tabPosition: i,
    theme: this.state.windowTheme,
    visible: l.tabs,
    __source: {
      fileName: N8,
      lineNumber: 1192,
      columnNumber: 15,
    },
  }),
s.createElement(
  "div",
  {
    ref: "webpageview",
    id: "webview-container",
    onFocus: this.trackContextOnFocus,
    __source: {
      fileName: N8,
      lineNumber: 1201,
      columnNumber: 13,
    },
  },
  s.createElement(q9, {
    cycleFocus: A.ZP.get(P.kWebpagesFocusTrap),
    __source: {
      fileName: N8,
      lineNumber: 1206,
      columnNumber: 15,
    },
  })
),
...

And after 5.2 it looks like this:

Post 5.2 code

...
i.createElement(d7, {
  key: "panel",
  position: e[Z.kPanelsPosition],
  outsideClickIgnoreClass: "panel-clickoutside-ignore",
  __source: {
      fileName: ote,
      lineNumber: 1258,
      columnNumber: 13
  }
}), i.createElement("div", {
  key: "webview-anchor",
  style: {
      width: this.getLeftTabbarWidth(),
      height: "auto"
  },
  __source: {
      fileName: ote,
      lineNumber: 1266,
      columnNumber: 13
  }
}, "left" === s && l.tabs && i.createElement(c8, {
  key: "tabbar",
  switchTabVisualTabSwitcher: this.switchTabVisualTabSwitcher,
  mainDialogType: this.state.mainDialogType,
  tabPosition: s,
  theme: this.state.windowTheme,
  visible: l.tabs,
  __source: {
      fileName: ote,
      lineNumber: 1271,
      columnNumber: 17
  }
})), i.createElement("div", {
  ref: this.refWebpageView,
  id: "webview-container",
  onFocus: this.trackContextOnFocus,
  __source: {
      fileName: ote,
      lineNumber: 1282,
      columnNumber: 13
  }
}, i.createElement(dee, {
  cycleFocus: I.Z.get(Z.kWebpagesFocusTrap),
  __source: {
      fileName: ote,
      lineNumber: 1287,
      columnNumber: 15
  }
})),
...

If you remove this width: this.getLeftTabbarWidth(), from the wrapper DIV labeled as webview-anchor, then the problem goes away

I am not sure if the width needs to be set for some reason, but by removing it, I didn't see any immediate side effects.

I also tried messing with the setTabBarWidth function to prevent the width from going below acceptable values, but it didn't completely solve the issue.

Failed fix

...
Q9(this, "setTabBarWidth", ((e,t=!0)=>{
  // Added this line below to prevent from going below 30px
  e=Math.max(e, 30),
  this.setState({
      tabBarWidth: e
  }, (()=>t && at.Z.set(Z.kTabsBarWidth, Math.round(e))))
}
...

I don't use tabs to the left either, but I might go ahead and submit a bug report since I might have found a possible solution.

nomadic

The bug report is in:
(VB-88228) Using the left tab bar position results in resizing issues when dragging the handle

guigirl

@devindev said in Can NOT place the tabs on the left side:

when I logout

@devindev said in Can NOT place the tabs on the left side:

after I re-login

What?

Vivaldi itself does not require "logging into" nor "out of". I've no idea what you mean. Nonetheless, based on your ...

@devindev said in Can NOT place the tabs on the left side:

problem is gone when I ... use a guest profile

...which btw is not the same as i asked you, implies that something in your current Vivaldi Default profile directory is damaged / corrupt. It might thus be time unfortunately for you to either troubleshoot said directory, otherwise build a new profile.

Ayespy

@devindev

This problem is gone when I logout or use a guest profile.

But it appears again after I re-login.

Hmmm... Log out of what? Re-log in to what? Certainly not the browser, as that's not possible - so, what then? That might offer a clue at to what's happening to your control over the UI.

nomadic

@DevinDEV there are a few things broken in version 5.2 regarding the left position for the tab bar. It is possible for the webpage view to completely cover the tab bar. See this thread for more details on the issue.

You can try running a command in the user interface's devTools console (while you have the tab bar position set to the left) and then restarting the browser. See this post for more instructions on how to accomplish that.

This command should set the tab bar width to 200px:

vivaldi.prefs.set({ path: "vivaldi.tabs.bar.width", value: 200})

If that doesn't work, I also happened to be messing around in some files I probably shouldn't have earlier today and managed to break the tab bar showing up in any of the configurations.

While trying to diagnose what I did wrong, I ran another command in the the UI's devTools console, that didn't appear to do anything at first, but fixed the issue once I switched back to the main Vivaldi window. All it does is look up the value of a preference, but it somehow brought the tab bar back unless I accidentally did something else that fixed it :

vivaldi.prefs.get("vivaldi.tabs.bar.position", console.log)

WildEnte

@nomadic said in Can NOT place the tabs on the left side:

It is possible for the webpage view to completely cover the tab bar. See this thread for more details on the issue.

Then it makes some sense, as in the first Screenshot it's shown that @DevinDEV has his settings open in a tab rather than a separate window/popup.

guigirl

@nomadic said in Can NOT place the tabs on the left side:

See this thread for more details on the issue

OMZ. Just read that thread. Once again, the sheer brilliance of you & @Pathduck shines through. We're all so lucky you're both here.

So, now can i get my fav VHooks back, pweese?

guigirl

@devindev It still makes no sense to me. Are you saying that you can close V, launch V, see a good lhs tabstrip, login to your V forum account [which, btw, should be redundant if you manage your V 3rd-party cookies correctly], & then poof, your lhs tabstrip vanishes?

You see, unless the above is true [which atm i do not expect], then i still don't understand your posts, because logging into any online account is / should be completely independent of V UI issues.

I just realised this is a windoze thread, so i'll back out now. Maybe such things are possible in windoze, but they're not in Linux. Good luck.

Ayespy

@devindev OK - so logging into or out of your Vivaldi account should make no difference to your UI. HOWEVER - Since the profile you use for that (because it has your cookies, passwords, etc. in it) seems to have the left tabs problem, the indication is that there is something wrong with that profile.

Let me test a couple of things here...

Hmm. So far, can't make it misbehave. What happens if you refresh your profile?