Naezr / ShyFox

A very shy little theme that hides the entire browser interface in the window border
Mozilla Public License 2.0
1.43k stars 22 forks source link

Pinned tab is too wide #68

Closed SourCreamKun closed 3 weeks ago

SourCreamKun commented 3 months ago

When I pin only one tab in panel the tab icon is wider than it should be. I suppose that is because i have tab panel buttons on the left instead of on top

SourCreamKun commented 3 months ago

image_2024-06-27_18-08-00.png

Here is the screenshot

Naezr commented 3 months ago

I suppose that is because i have tab panel buttons on the left instead of on top

Yes, you're right

SourCreamKun commented 3 months ago

Yes, you're right

But it seems that in css only difference between the width of regular tab and a pined tab is this: regular tab: calc(100% - var(--tabs-margin)*2) pinned tab: calc(100vw - var(--tabs-margin)*2) then why the width is calculated wrong ?

SourCreamKun commented 3 months ago

Also the reason that I use vertical nav-bar layout is not only because it is more comfortable for me, but the fact that buttons on horizontal do not work with title bar disabled

SourCreamKun commented 3 months ago

I fexed it by changing some coefficients for me, but I dont know if this will work for others with the same issue. In shy-sidebery.css I added div .main-box:has(.left-horizontal-box){ at line 50, a closing curly brace } at line 94 and after it this chunk of code


div .main-box:has(.left-vertical-box){

  .tab-wrapper{
    width: auto;
  }

  /* 1 pinned tab */

    .PinnedTabsBar .tab-wrapper:nth-child(1):last-child{

      .Tab{
        width: calc(100vw - var(--tabs-margin)*7.5) !important;
        height: calc(var(--tabs-pinned-height) / 1.4) !important;}
    }

    /* 2 tabs in bottom row */

    .PinnedTabsBar:has(.tab-wrapper:is(
      :nth-child(2), :nth-child(5), :nth-child(8), :nth-child(11),
      :nth-child(14), :nth-child(17), :nth-child(20), :nth-child(23),
      :nth-child(26), :nth-child(29), :nth-child(32), :nth-child(35),
      :nth-child(38), :nth-child(41), :nth-child(44), :nth-child(47)
    ):last-child){
      .tab-wrapper{
        width: auto;
      }
      .tab-wrapper:nth-last-child(-n + 2){

        .Tab {
          /* calc(100vw - var(--tabs-margin)*2) */
          width: calc(50vw - var(--tabs-margin) * 4.4) !important;
          height: calc(var(--tabs-pinned-height) / 1.2) !important;
        }
      }
    }

    /* 3 tabs in any row */
    .PinnedTabsBar .tab-wrapper .Tab {width: calc(100vw / 3 - var(--tabs-margin) * 3.3) !important}

    /* 4 tabs in bottom row */

    .PinnedTabsBar:has(.tab-wrapper:is(
      :nth-child(4), :nth-child(7), :nth-child(10),
      :nth-child(13), :nth-child(16), :nth-child(19), :nth-child(22),
      :nth-child(25), :nth-child(28), :nth-child(31), :nth-child(34),
      :nth-child(37), :nth-child(40), :nth-child(43), :nth-child(46)
    ):last-child){
      .tab-wrapper:nth-last-child(-n + 4){
        .Tab {
          width: calc(100vw / 4 - var(--tabs-margin) * 2.7) !important;
          height: calc(var(--tabs-pinned-height) / 1.3) !important;
        }
      }
    }
}```