Move tab names to the right

[ItwasamiiDio]

I want to move the names of all tabs to the right so the letters aren't visible when the sidebar is hidden

I used some userChrome.css code snippets from the Wiki to achieve this. Here's my file in case it's needed for a solution

/*Hide horizontal tabs at the top of the window #1349, #1672, #2147*/

#tabbrowser-tabs {
visibility: collapse !important;
min-height: 0 !important;
}

tab{
display:none!important;
}





/*Move Minimize/Restore/Close window buttons to the right of Hamburger menu (after hiding horizontal tabs)/*

/* Adding empty space for buttons */

#nav-bar {
	margin-right:140px;
}

/* Move minimize/restore/close buttons to empty space */

#TabsToolbar > .titlebar-buttonbox-container {
	display: block;
	position: absolute;
	top: 5px;
	right: 1px;
}





/* Hide the "Tree Style Tab" header at the top of the sidebar*/

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  display: none;
}





/*Auto-show/hide sidebar by mouseover (hover)*/

/*Collapse in default state and add transition*/
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
  overflow: hidden;
  min-width: 40px !important;
  max-width: 40px !important;
  transition: all 0.2s ease;
  border-right: 1px solid #0c0c0d;
  z-index: 2;
}

/*Expand to 260px on hover*/
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar {
  min-width: 260px !important;
  max-width: 260px !important;
  z-index: 1;
}

I am aware that Firefox has added a vertical tabs feature accessible through about:config, but I don't like the fact it hides the tab names completely and I have to hover to know the tab name. Very odd choice.