CODEWITHSUNDEEP
cssgoogle-chrome-devtoolsweb-developer-toolbarvivaldi
Michael Gunter
Michael Gunter

Reputation: 93

My <div> tag with aria-labelledby of `tabbar-toplevel-label` is seemingly cut off in the UI of Vivaldi Browser

I noticed when using my web browser Vivaldi, which is a Chromium-based browser with a UI powered by HTML, CSS, JS, React, and Node.js, a recent update caused the upper tab bar to be cut off from the navigation bar. Here is a screenshot of what the issue looks like.Screenshot of cut off tab bar

Here is another image.

Another screenshot of the issue

As Vivaldi browser's UI is built with web technologies, the core UI of the browser is basically a "webpage with superpowers". When using chrome://inspect/#apps and accessing window.html, here is what the code I found for the browser's UI. Note: I had to use a GitHub Gist because adding the code to this StackOverflow post caused the post to exceed the character limit.

https://gist.github.com/dazzletune/7950b8c35ff473465b032b3d0c5a00e3

Using the element picker, I was able to narrow down the affected element to div[aria-labelledby="tabbar-toplevel-label"]. Here is the element focused in on.

<!--
BSD 3-Clause License

Copyright (c) June 26, 2024, Michael Gunter

All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:

1. Redistributions of source code must retain the above copyright notice, this
   list of conditions and the following disclaimer.
2. Redistributions in binary form must reproduce the above copyright notice,
   this list of conditions and the following disclaimer in the documentation
   and/or other materials provided with the distribution.
3. Neither the name of the copyright holder nor the names of its
   contributors may be used to endorse or promote products derived from
   this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-->

<div id="tabs-container" role="toolbar" aria-labelledby="tabbar-toplevel-label" aria-orientation="horizontal" class="top" style="padding-left: 0px;">
                <span hidden="" id="tabbar-toplevel-label">Tabs</span>
                <div class="resize">
                  <div class="toolbar toolbar-tabbar">
                    <div class="button-toolbar horizontal-scroll-arrow disabled" style="padding-right: 31px;">
                      <button tabindex="-1" title="Scroll left
Hold to show open tabs" type="button" aria-label="Scroll left
Hold to show open tabs" class="ToolbarButton-Button">
                        <span class="button-icon">
                          <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.2071 4.20711C10.5977 3.81658 10.5977 3.18342 10.2071 2.79289C9.81661 2.40237 9.18345 2.40237 8.79292 2.79289L3.58582 8L8.79292 13.2071C9.18345 13.5976 9.81661 13.5976 10.2071 13.2071C10.5977 12.8166 10.5977 12.1834 10.2071 11.7929L6.41424 8L10.2071 4.20711Z"></path>
                          </svg>
                        </span>
                      </button>
                    </div>
                  </div>
                  <div role="tablist" aria-labelledby="tabbar-toplevel-label" aria-orientation="horizontal" aria-owns="tab-1208828801 tab-1208828802 tab-1208829203 tab-1208829212 tab-1208829213" class="tab-strip horizontal-scrolling horizontal-scrolling-smooth">
                    <span>
                      <div class="tab-position is-pinned" style="--PositionX: -31px; --PositionY: 0px; --Height: 30px; --Width: 31px; --ZIndex: 1; position: fixed;">
                        <div id="tab-1208828801" class="tab pinned button-off unread" data-id="tab-1208828801" role="tab" aria-label="Mail - Michael Gunter - Outlook" aria-hidden="false" aria-selected="false" tabindex="-1">
                          <div class="tab-header">
                            <span class="favicon jstest-favicon-image " style="">
                              <img width="16" height="16" srcset="chrome://favicon/size/16@1x/iconurl/https://res.cdn.office.net/owamail/20240614008.14/resources/images/favicons/mail-unseen.ico 1x,chrome://favicon/size/16@2x/iconurl/https://res.cdn.office.net/owamail/20240614008.14/resources/images/favicons/mail-unseen.ico 2x">
                            </span>
                            <span class="title">Mail - Michael Gunter - Outlook</span>
                          </div>
                        </div>
                      </div>
                    </span>
                    <span>
                      <div class="tab-position" style="--PositionX: 0px; --PositionY: 0px; --Height: 30px; --Width: 185px; --ZIndex: 1;">
                        <div id="tab-1208828802" class="tab force-hover audio-on" data-id="tab-1208828802" role="tab" aria-label="Banjo Tooie - Hag 1 Orchestrated - Piped" aria-hidden="false" aria-selected="false" tabindex="-1">
                          <div class="tab-header">
                            <span class="favicon jstest-favicon-image " style="">
                              <img width="16" height="16" srcset="chrome://favicon/size/16@1x/iconurl/https://piped.adminforge.de/favicon.ico 1x,chrome://favicon/size/16@2x/iconurl/https://piped.adminforge.de/favicon.ico 2x">
                            </span>
                            <span class="title">Banjo Tooie - Hag 1 Orchestrated - Piped</span>
                            <button class="close" title="Close Tab
Alt click to close other tabs except this one">
                              <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                <path d="M4.293 4.293a1 1 0 0 1 1.414 0L8 6.586l2.293-2.293a1 1 0 1 1 1.414 1.414L9.414 8l2.293 2.293a1 1 0 0 1-1.414 1.414L8 9.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L6.586 8 4.293 5.707a1 1 0 0 1 0-1.414Z"></path>
                              </svg>
                            </button>
                            <span class="tab-audio">
                              <canvas class="audioicon" width="32" height="32" title="Mute tab audio"></canvas>
                            </span>
                          </div>
                        </div>
                      </div>
                    </span>
                    <span>
                      <div class="tab-position" style="--PositionX: 185px; --PositionY: 0px; --Height: 30px; --Width: 185px; --ZIndex: 1;">
                        <div id="tab-1208829203" class="tab force-hover" data-id="tab-1208829203" role="tab" aria-label="javascript - I am almost finished porting a Chrome/Chromium Manifest v2 extension to Manifest v3 and while I no longer get errors, no audio plays. What to do? - Stack Overflow" aria-hidden="false" aria-selected="false" tabindex="-1">
                          <div class="tab-header">
                            <span class="favicon jstest-favicon-image " style="">
                              <img width="16" height="16" srcset="chrome://favicon/size/16@1x/iconurl/https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196 1x,chrome://favicon/size/16@2x/iconurl/https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196 2x">
                            </span>
                            <span class="title">javascript - I am almost finished porting a Chrome/Chromium Manifest v2 extension to Manifest v3 and while I no longer get errors, no audio plays. What to do? - Stack Overflow</span>
                            <button class="close" title="Close Tab
Alt click to close other tabs except this one">
                              <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                <path d="M4.293 4.293a1 1 0 0 1 1.414 0L8 6.586l2.293-2.293a1 1 0 1 1 1.414 1.414L9.414 8l2.293 2.293a1 1 0 0 1-1.414 1.414L8 9.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L6.586 8 4.293 5.707a1 1 0 0 1 0-1.414Z"></path>
                              </svg>
                            </button>
                          </div>
                        </div>
                      </div>
                    </span>
                    <span>
                      <div class="tab-position" style="--PositionX: 371px; --PositionY: 0px; --Height: 30px; --Width: 185px; --ZIndex: 1;">
                        <div id="tab-1208829212" class="tab force-hover" data-id="tab-1208829212" role="tab" aria-label="Start Page" aria-hidden="false" aria-selected="false" tabindex="-1">
                          <div class="tab-header">
                            <span class="favicon jstest-favicon-image svg">
                              <span>
                                <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M3 2C2.44772 2 2 2.44772 2 3V6C2 6.55228 2.44772 7 3 7H6C6.55228 7 7 6.55228 7 6V3C7 2.44772 6.55228 2 6 2H3ZM3 3H6V6H3V3Z"></path>
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 10C2 9.44771 2.44772 9 3 9H6C6.55228 9 7 9.44771 7 10V13C7 13.5523 6.55228 14 6 14H3C2.44772 14 2 13.5523 2 13V10ZM6 10H3V13H6V10Z"></path>
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M9 10C9 9.44771 9.44771 9 10 9H13C13.5523 9 14 9.44771 14 10V13C14 13.5523 13.5523 14 13 14H10C9.44771 14 9 13.5523 9 13V10ZM13 10H10V13H13V10Z"></path>
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M9 3C9 2.44772 9.44771 2 10 2H13C13.5523 2 14 2.44772 14 3V6C14 6.55228 13.5523 7 13 7H10C9.44771 7 9 6.55228 9 6V3ZM13 3H10V6H13V3Z"></path>
                                </svg>
                              </span>
                            </span>
                            <span class="title">Start Page</span>
                            <button class="close" title="Close Tab
Alt click to close other tabs except this one">
                              <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                <path d="M4.293 4.293a1 1 0 0 1 1.414 0L8 6.586l2.293-2.293a1 1 0 1 1 1.414 1.414L9.414 8l2.293 2.293a1 1 0 0 1-1.414 1.414L8 9.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L6.586 8 4.293 5.707a1 1 0 0 1 0-1.414Z"></path>
                              </svg>
                            </button>
                          </div>
                        </div>
                      </div>
                    </span>
                    <span>
                      <div class="tab-position" style="--PositionX: 556px; --PositionY: 0px; --Height: 30px; --Width: 185px; --ZIndex: 2;">
                        <div id="tab-1208829213" class="tab active uifocusstop force-hover" data-id="tab-1208829213" role="tab" aria-label="Inspect with Chrome Developer Tools" aria-hidden="false" aria-selected="true" tabindex="-1">
                          <div class="tab-header">
                            <span class="favicon jstest-favicon-image ">
                              <img width="16" height="16" src="/resources/default_favicon_64.png">
                            </span>
                            <span class="title">Inspect with Chrome Developer Tools</span>
                            <button class="close" title="Close Tab
Alt click to close other tabs except this one">
                              <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                <path d="M4.293 4.293a1 1 0 0 1 1.414 0L8 6.586l2.293-2.293a1 1 0 1 1 1.414 1.414L9.414 8l2.293 2.293a1 1 0 0 1-1.414 1.414L8 9.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L6.586 8 4.293 5.707a1 1 0 0 1 0-1.414Z"></path>
                              </svg>
                            </button>
                          </div>
                        </div>
                      </div>
                    </span>
                    <div class="toolbar toolbar-tabbar toolbar-large tab-position">
                      <div class="button-toolbar newtab" style="--PositionX: 742.1671752929688px; --PositionY: 0px; --Height: 30px; --Width: 30px; --ZIndex: 0; left: 742.167px; top: 0px;">
                        <button tabindex="-1" title="Open a New Tab" type="button" aria-label="New Tab" class="ToolbarButton-Button">
                          <span class="button-icon">
                            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 19.25C13.5 19.6642 13.8358 20 14.25 20C14.6642 20 15 19.6642 15 19.25V15H19.25C19.6642 15 20 14.6642 20 14.25C20 13.8358 19.6642 13.5 19.25 13.5H15V9.25C15 8.83579 14.6642 8.5 14.25 8.5C13.8358 8.5 13.5 8.83579 13.5 9.25V13.5H9.25C8.83579 13.5 8.5 13.8358 8.5 14.25C8.5 14.6642 8.83579 15 9.25 15H13.5V19.25Z" fill="currentColor"></path>
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </div>
                  <div class="toolbar toolbar-tabbar">
                    <div class="button-toolbar horizontal-scroll-arrow disabled">
                      <button tabindex="-1" title="Scroll right
Hold to show open tabs" type="button" aria-label="Scroll right
Hold to show open tabs" class="ToolbarButton-Button">
                        <span class="button-icon">
                          <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                            <path d="M5.79286 11.7929C5.40234 12.1834 5.40234 12.8166 5.79286 13.2071C6.18339 13.5976 6.81655 13.5976 7.20708 13.2071L12.4142 8L7.20708 2.79289C6.81655 2.40237 6.18339 2.40237 5.79287 2.79289C5.40234 3.18342 5.40234 3.81658 5.79287 4.20711L9.58576 8L5.79286 11.7929Z"></path>
                          </svg>
                        </span>
                      </button>
                    </div>
                  </div>
                  <div class="toolbar toolbar-tabbar sync-and-trash-container top">
                    <div class="button-toolbar toggle-trash hidden">
                      <button tabindex="-1" title="Show Closed Tabs
Shift-click to reopen last closed tab" type="button" aria-label="Closed Tabs" class="ToolbarButton-Button">
                        <span class="button-icon">
                          <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9.25 11V18.75C9.25 19.8546 10.1454 20.75 11.25 20.75H16.75C17.8546 20.75 18.75 19.8546 18.75 18.75V11" stroke="currentColor" stroke-width="1.5"></path>
                            <path d="M18 8C17.7239 8 17.5 7.77614 17.5 7.5C17.5 7.22386 17.2761 7 17 7H11C10.7239 7 10.5 7.22386 10.5 7.5C10.5 7.77614 10.2761 8 10 8H8.5C7.94772 8 7.5 8.19772 7.5 8.75C7.5 9.30228 7.94772 9.5 8.5 9.5H19.5C20.0523 9.5 20.5 9.30228 20.5 8.75C20.5 8.19772 20.0523 8 19.5 8H18Z" fill="currentColor"></path>
                            <line opacity="0.35" x1="12.25" y1="11.75" x2="12.25" y2="17.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line>
                            <line opacity="0.35" x1="15.75" y1="11.75" x2="15.75" y2="17.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line>
                          </svg>
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>

Now, I know a little bit about CSS, but I am certainly not an expert. To solve the problem, all I need to do is create a CSS custom modification that lowers the div[aria-labelledby="tabbar-toplevel-label"] just enough pixels to be reconnected to the navigation bar. I have the selector CSS structure as follows.

div[aria-labelledby="tabbar-toplevel-label"] {
  /* My styles goes here */
}

I just need the code to "bring down the tab bar represented in the element represented in the provided CSS selector, and I should be ready to go. I hope this helps allow you to help me.

Upvotes: 1

Views: 71

Answers (1)

Michael Gunter
Michael Gunter

Reputation: 93

So it seemed that the CSS property value pairs position: relative and top: {offset}px worked to solve my issue. Thank you and shoutout to @Symtox for helping me find the solution!

html .tab-position.is-pinned {
    position: relative;
    top: 9.1px;
}

html #browser.linux.maximized .tab-position.is-pinned,
html #browser.linux.fullscreen .tab-position.is-pinned {
    position: relative;
    top: -0.1px;
}

div[aria-labelledby="tabbar-toplevel-label"] {
    position: relative;
    top: 3.2px;
}

Upvotes: 1

Related Questions