Firefox Community Forum

Good day everyone,

I have been breaking my head over this for about a week. After the last update that was installed, now my tab width is smaller than the minimum width I have set them to. However, this only happens with active tabs from pages that have an embedded video. At first I thought this was just a thing with YouTube, but it seems it also happens with other video sites. I guess it may be related to whenever the playback button displays in the tab title and it detects there is video content.

I would like to know how to fix this behavior so that my tabs are no longer shortened beyond the minimum width setting.

Thank you in advance.

duplicate of /questions/1498770 thread

Recently (around Fx 134) css code for chrome files stopped working. The code I use is set out below. It previously changed the background colour to tan ( #dbc3a3 ), the text colour to dark blue ( #000080 ) and the font size to 17 px. The code found at the following location also no longer works for chrome files : https://gist.github.com/MrOtherGuy/c592f6443dd228022966cbe5715ad5c9

@-moz-document url-prefix("about:"), url-prefix("chrome://"), url-prefix("resource://"){

 :root {
     --in-content-page-color: #000080 !important;
     --in-content-text-color: #000080 !important;
     --in-content-page-background: #dbc3a3 !important;
     --in-content-box-background: #e2cfb6 !important;
     --in-content-deemphasized-text: var(--in-content-text-color) !important;
     scrollbar-color: #6495ed #d9d9d9 !important; 
     --background-color-box: var(--in-content-page-background) !important;
     --text-color: var(--in-content-text-color) !important;      
     color:var(--in-content-text-color) !important;
     --background-color-canvas: var(--in-content-page-background) !important;
     --table-row-background-color-alternate: var(--in-content-box-background) !important;    

 menulist > menupopup{ background-color: var(--in-content-page-background) !important; }}}
 

@-moz-document url-prefix("chrome:") {

 html, body, div, h1, p, table, td, tr { background-color: #dbc3a3 !important;
   color: #000080 !important;
   font-size: 17px !important; }
 tr:hover { background-color: #b3d1ff !important; }
 tr.odd:hover { background-color: #b3d1ff !important; }

}

duplicate of /questions/1498770 thread

Recently (around Fx 134) css code for chrome files stopped working. The code I use is set out below. It previously changed the background colour to tan ( #dbc3a3 ), the text colour to dark blue ( #000080 ) and the font size to 17 px. The code found at the following location also no longer works for chrome files : https://gist.github.com/MrOtherGuy/c592f6443dd228022966cbe5715ad5c9

@-moz-document url-prefix("about:"), url-prefix("chrome://"), url-prefix("resource://"){

 :root {
     --in-content-page-color: #000080 !important;
     --in-content-text-color: #000080 !important;
     --in-content-page-background: #dbc3a3 !important;
     --in-content-box-background: #e2cfb6 !important;
     --in-content-deemphasized-text: var(--in-content-text-color) !important;
     scrollbar-color: #6495ed #d9d9d9 !important; 
     --background-color-box: var(--in-content-page-background) !important;
     --text-color: var(--in-content-text-color) !important;      
     color:var(--in-content-text-color) !important;
     --background-color-canvas: var(--in-content-page-background) !important;
     --table-row-background-color-alternate: var(--in-content-box-background) !important;    

 menulist > menupopup{ background-color: var(--in-content-page-background) !important; }}}
 

@-moz-document url-prefix("chrome:") {

 html, body, div, h1, p, table, td, tr { background-color: #dbc3a3 !important;
   color: #000080 !important;
   font-size: 17px !important; }
 tr:hover { background-color: #b3d1ff !important; }
 tr.odd:hover { background-color: #b3d1ff !important; }

}

duplicate of /questions/1498770 thread

Recently (around Fx 134) css code for chrome files stopped working. The code I use is set out below. It previously changed the background colour to tan ( #dbc3a3 ), the text colour to dark blue ( #000080 ) and the font size to 17 px. The code found at the following location also no longer works for chrome files : https://gist.github.com/MrOtherGuy/c592f6443dd228022966cbe5715ad5c9

@-moz-document url-prefix("about:"), url-prefix("chrome://"), url-prefix("resource://"){

 :root {
     --in-content-page-color: #000080 !important;
     --in-content-text-color: #000080 !important;
     --in-content-page-background: #dbc3a3 !important;
     --in-content-box-background: #e2cfb6 !important;
     --in-content-deemphasized-text: var(--in-content-text-color) !important;
     scrollbar-color: #6495ed #d9d9d9 !important; 
     --background-color-box: var(--in-content-page-background) !important;
     --text-color: var(--in-content-text-color) !important;      
     color:var(--in-content-text-color) !important;
     --background-color-canvas: var(--in-content-page-background) !important;
     --table-row-background-color-alternate: var(--in-content-box-background) !important;    

 menulist > menupopup{ background-color: var(--in-content-page-background) !important; }}}
 

@-moz-document url-prefix("chrome:") {

 html, body, div, h1, p, table, td, tr { background-color: #dbc3a3 !important;
   color: #000080 !important;
   font-size: 17px !important; }
 tr:hover { background-color: #b3d1ff !important; }
 tr.odd:hover { background-color: #b3d1ff !important; }

}

duplicate of /questions/1498770 thread

Recently (around Fx 134) css code for chrome files stopped working. The code I use is set out below. It previously changed the background colour to tan ( #dbc3a3 ), the text colour to dark blue ( #000080 ) and the font size to 17 px. The code found at the following location also no longer works for chrome files : https://gist.github.com/MrOtherGuy/c592f6443dd228022966cbe5715ad5c9

@-moz-document url-prefix("about:"), url-prefix("chrome://"), url-prefix("resource://"){

 :root {
     --in-content-page-color: #000080 !important;
     --in-content-text-color: #000080 !important;
     --in-content-page-background: #dbc3a3 !important;
     --in-content-box-background: #e2cfb6 !important;
     --in-content-deemphasized-text: var(--in-content-text-color) !important;
     scrollbar-color: #6495ed #d9d9d9 !important; 
     --background-color-box: var(--in-content-page-background) !important;
     --text-color: var(--in-content-text-color) !important;      
     color:var(--in-content-text-color) !important;
     --background-color-canvas: var(--in-content-page-background) !important;
     --table-row-background-color-alternate: var(--in-content-box-background) !important;    

 menulist > menupopup{ background-color: var(--in-content-page-background) !important; }}}
 

 html, body, div, h1, p, table, td, tr { background-color: #dbc3a3 !important;
   color: #000080 !important;
   font-size: 17px !important; }
 tr:hover { background-color: #b3d1ff !important; }
 tr.odd:hover { background-color: #b3d1ff !important; }

}

Hello Since few weeks (maybe on firefox 132 already, but surely on firefox 133) I observe issue with my firefox UI. While grabbing and holding tab (to change its position, move it on bar), whole tab bar gets thinner which realigns my whole UI. Issue is probably caused by my custom userchrome.css but I need it in current or similar form. Maybe there is some css specialist who can help me remove unnecessary parts of code?

My css is as follows:

.tab-background{ border-radius: 0px 0px !important; margin-bottom: 0px !important; } .tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background{ background-color: color-mix(in srgb, currentColor 4%, transparent); } menupopup > menu, menupopup > menuitem{ padding-block: 3px !important; min-height: 0px !important; }

root{

--arrowpanel-menuitem-padding: 2px !important; }