Solved Broken tabs bar on the left when resizing

nomadic

@Bolt1955 Just to be clear, you don't need to edit the bundle.js file to fix this while waiting for a proper fix from Vivaldi.

See this section to easily fix the problem:
@nomadic said in Left Aligned Tab Bar clipped by webpage:

Looks like it can temporarily be fixed by using a CSS mod and adding this:
#panels-container + div {
    width: unset !important;
}

The devs were probably mostly focused on fixing the issues that the previous update brought to MacOS, but hopefully they do get to this bug by the next update. The bug report has been marked as valid and reproducible, so the process has begun.

I suspect they might want a width on the wrapper for some reason, so the fix could be more complex than my simple hack job.

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

[I] download a good free JS editor (Visual Studio Code in my case) ... Incidentally, how did you get the content of bundle.js to wrap so nicely?

There are a few ways to go about that. I primarily use these 2 options depending on if I want to read and edit the code or debug the code as it runs.

Option 1:

You chose a great editor for working on JS files. It is also what I use.

VScode has several extensions for extending the functionality of the editor. One such extension is Prettier - Code formatter, which, as it's name suggests, makes code more "pretty" by going through a file and implementing consistent formatting.

Prettier can be set up to run on save, so I create a new file called prettyBundle.js, paste in the contents of bundle.js, and then save to let Prettier go through and implement the more friendly formatting. It will take several seconds to save because it is a rather long file that needs lots of changes to be anything near human readable.

Option 2:

But to troubleshooting something in bundle.js, it is helpful to use break points and step through the code as it runs, so for that I use a devTools window to inspect the user interface of Vivaldi (I think you can also setup remote debugging in VScode, but I have never bothered to use it).

The process of debugging is probably too difficult for me to explain clearly here, so you should look up tutorials for "setting and using breakpoints to debug code in Chrome devTools" if you are interested, but I can tell you how to make the code easier to read while you are looking at it in devTools.

When you go to the Sources tab and select the bundle.js file in the left hand pane, you will bring up a view of the usual unreadable minified code in the center pane. To make it readable, you just need to click the { } button in the bottom left of the center pane to Pretty print bundle.js.

Then devTools should open bundle.js:formatted and you should be all set to debug or copy the formated code to paste in an editor.

Hope that helps you if you are curious to do any exploring.

The second part of my original post was more to document my investigation than to suggest that others should modify their bundle.js. Pretty easy to break something doing that. Deleting 1 stray character can stop the whole thing from working if you aren't too familiar with coding.

The CSS mod should work for now. I will edit the other post to make it more clear that the CSS is the best way to fix it right now.

guigirl

@jaggu There are at least two existing threads on this. Iirc someone has already raised a bug report. Maybe search the forum?

nomadic

@jaggu You can find a temporary fix here.

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

Bolt1955

@nomadic Thanks so much for the detailed explanations -- really above and beyond! I saw the CSS mod solution, but even with the linked page, I didn't really understand the concept of that approach generally in enough depth to feel comfortable with it. Or put differently, the upfront cost of becoming comfortable with it seemed likely to exceed the upfront cost of tackling the javascript file and editing it. But, of course, that's just me.

I also posted this bug to the Reddit Vivaldi group -- a response from "pettern", a "Vivaldi Dev", indicated this bug has been fixed internally -- and he said he was checking when it would make it to a stable release.

DoctorG

That is a already reported nasty bug in 5.2 Stable
If resized too small, lose mouse access to panel border.

Workaround: If the tab bar on left is to small, switch to tab bar right, resize tab bar, switch to tab bar left.

nomenclator

My vetical tabs are working wonkily. I'm using version 5.2.2623.33 now. Problem started with the previous version. I was hoping this latest ver would fix the problem, but it did not. If I have more than one window open, when I adjust the tab width in one window, the other windows also get adjusted – but improperly. If I widen the tab bar on one window then on the other windows there develops a blank space between the tab bar and the web page display. If I narrow the tab bar on one window there develops an overlap between the tab bar and the the web page display, on the other windows. I've been working around this by hitting F11 twice in the windows with the problem tab display. This restores the tab display to a proper appearance. Still, altering the width on one window has altered the width on all the other windows.

If I recall correctly, 2 versions back changing the tab bar width on one window, did not alter the tab bar width on all the other windows. Now it does. I've downloaded version 5.2.2623.24.x64 but I haven't yet installed it, to see if my memory is correct.

Same problem with all the "persons." Same problem on my other computer. Same problem whether vertical tabs on on the left or the right.

nomenclator

Updated to ver 5.2.2623.34. Problem still exists. As I said in previous message, to test whether this might be a problem with my operating system, as opposed to a problem with Vivladi, I checked Vivaldi on my other computer and Vivaldi had the same problem there.

Ayespy

@nomenclator You have vertical tabs on left - not right? There is a known problem with that, which Vivaldi devs are working on.

nomenclator

@ayespy Thanks for the info. I just checked and I don't have a problem if the vertical tabs are on the right. In a previous version of Vivaldi there was a problem with vertical tabs whether they were on the L or the R. So when I did my last version update and noticed that I still had a problem with vertical tabs on the Left, I erroneously assumed that there was still a problem if the vertical tabs were on the Right. I apologize for my erroneous assumption.

nomadic

This bug was fixed in the latest snapshot version 5.3.2643.3.

From the Blog Post:

Changelog

...

[Tabs] Broken on the left when resizing (VB-88017)

And, as I suspected, they fixed the way the width was updated on the wrapper rather than simply deleting it. Don't know exactly what the width is used for, but I am sure there is a good reason.

KlausFranbrau2

A recent update introduced some new behavior for me. I have my tabs on the left. If I have multiple instances of Vivaldi open, resizing the tab bar in one instance resizes the tab bars in other instances. In some instances I can't resize the tab bar except by going to another instance of Vivaldi and resizing there. Is this a known bug or do I have an option set that causes this (I don't see anything that looks likely)?

Version info:

Vivaldi 5.2.2623.36 (Stable channel) (64-bit)
Revision c34fdb082ee73bb058572e51fb5e08545bba5222
OS Windows 10 Version 21H1 (Build 19043.1645)
JavaScript V8 10.0.139.13
User Agent Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.92 Safari/537.36

Jim0000

I have lost the open tabs display in my Vivaldi browser.
I have spent several hours searching for a solution, but my problem seems to be too basic for most sites to address. I have gone into the settings and changed some of the show tabs etc. Done some random changes, with no solution.
Also, I tried to resort to a full reset as described in this site:

https://help.vivaldi.com/desktop/install-update/full-reset-of-vivaldi/

I was unable to do this, as I could not find the file path on my computer.
I go stuck at steps 3 & 4 in the How to reset Vivaldi settings.png Screenshot attached.

Can someone assist me with this please?

Jim.

guigirl

@jim0000 said in Lost open tabs display.:

I have lost the open tabs display in my Vivaldi browser.

I don't understand; are you saying the tab-bar [horizontal tabs] or tab-column [vertical tabs] is not visible anywhere in your V UI? In Settings, can you change tab position to top, bottom, lhs, rhs, all without them actually appearing? Can you pls provide a screenshot of your UI?

What happens if you try a clean profile, launched from terminal via vivaldi-stable --profile-directory="NewTestProfile"?

Jim0000

Thanks for the reply gg.
I now have a second computer with Vivaldi installed and booted up.
I will take two screenshots. One of the second computer browser with tabs displayed in the left panel, as I am accustomed to (ie: correctly), and the other without (which I am having difficulty in restoring).
I will post this now and come back and edit it soon with the screenshots.
Thanks for the command to restore. I will use that if necessary, but not just yet.
Mainly because I am curious to the point of irritation about this!

Asus part screen.png

This is the Vivaldi installation that I am having the difficulty with.
When first install, I had all opened tabs visible in the left panel, where "Window" is now being displayed, as shown in this screenshot.

Second screenshot pending...........

This is the screenshot from the new installation in my second computer. It displays "Welcome" with open tabs in the left panel. This is what I am striving to set back to in my Asus computer (First screenshot).

I hope this illustrates my question more clearly.

Jim. Second installation.png

Jim0000

This third screenshot shows the settings I now have (correctly or not) in the browser in my Asus computer (problem browser).
Please check them and comment for corrections etc.

I am guessing that there is one setting incorrect in the area displayed in this fourth screenshot below:

Suspect area.png

guigirl

Right. Some things.

have i guessed correctly that you use Stable not Snapshot V?
assuming i am correct on that, i suspect you've fallen victim to a nasty bug that has been fixed now in Snappie, but afaik remains present in Stable
said bug caused the tab-bar [vertical tabs] to completely vanish when it was being manually resized.
pls note; your posts are confusing coz you're using some terminology incorrectly. Don't intermix the Panel & the Tab-Bar; they're two entirely different UI items.
pls [in Settings] change your lhs tab-bar to rhs; does it now appear? If not, relaunch V; now is it there, on rhs?
if it is, it might not be the width you want, if so, carefully drag it as desired, but note that especially if you try to make it "too" narrow, the bug might again kick in & make it vanish.
if the preceding helped, in Settings you may now return it to lhs... but afaik this nasty bug might still keep biting you.

PS: i use Snappies, & do not closely follow progress in the Stables, so i don't know if possibly the Devs might have backported the fix from Snappie to Stable? Ensure you are up to date with the very latest Stable, just in case it was backported... otherwise, you won't get the fix til the next major Stable update [maybe you might care to join in the fun with us in the Snappies releases?].

Jim0000

Edited @ 13:07

First of all, I first thought I had fixed the problem by using the terminal command provided in your first post, many thanks for that!
Now multiple functions appear to be not working.
For example, I am unable to single click on the "V" symbol at top left to access tools, settings etc.
I might have to go back to FireFox.

@guigirl said in Lost open tabs display.:

have i guessed correctly that you use Stable not Snapshot V?........[/Quote]

Sorry for my ignorance, but I don't even know what that is!

[Quote]

pls note; your posts are confusing coz you're using some terminology incorrectly. Don't intermix the Panel & the Tab-Bar; they're two entirely different UI items. .........[/Quote]

Also, I don't know these terms. I will do a search and read the definitions.
Apologies for my ignorance here!

[Quote]

PS: i use Snappies, & do not closely follow progress in the Stables, ........[/Quote]

As above.
I can see I have more homework to do!

Many thanks for you assistance.

Jim.

Ayespy

@jim0000 K, Jim. There are two public versions of Vivaldi. Stable, and Snapshot. On the whole, Stable is updated every six weeks or so, and Snapshot is updated roughly weekly. The former is the public version most people are expected to use, and the latter is a sort of "Beta" version. If you look at vivaldi.com/blog you can find shortcuts to both versions.

The panel is a "sidebar" with icons leading to various features. It is not a tab bar, and does not display tabs. That said, it does have a Window icon which, if you click on it, does show you all of your open tabs and their relationships to each other (kind of like a treestyle tab display) and some people actually like to use this rather than a tab bar. In one of your images above you are showing the Window panel display, rather than the tab bar. The actual tab bar contains only your tabs, and you can leave it at the top of the browser (default) or you can show your tabs at the right, left or bottom of the browser window.

So - Panel is one thing, and tab bar is another. Using the View menu, you can turn the ability to see the panel, or to see the tab bar, or the bookmarks bar, or the status bar, on or off.

I hope this gives you a jumping off point.

Jim0000

@ayespy
Thanks for those explanations. I will go back a read a few times and see how much of it I can absorb.
If I have understood the distinction at all, does that mean my thread title should have been:

"Lost open tabs in panel display"?
Or something similar?

Jim.

Ayespy

@jim0000 It would be "Window Panel." It would probably be something like "Lost Window Panel" and it would probably be because you accidentally turned off your view of the window panel - which can be fixed by left-click on the panel bar and then clicking to put a checkmark by "window," at which point your window panel will come back. If there is ALREADY a checkmark by it, then all you had to do was click on its icon in the panel bar - at which point it would pop into view, showing your current tabs.