Firefoxの縦型タブ、ピン留めにも名前がほしい

どうも、こたつやきです。

Firefoxの縦型タブ、ピン留めするとアイコンだけになって、タイトルが見えないんですよね。どれがどのタブか分かりにくいので、タイトルも表示して、1つずつ横幅いっぱいに並べる userChrome.css を書いてみました。

/* Firefox native vertical pinned tabs:
   show pinned tabs as normal full-width rows */

/* One pinned tab per row */
#pinned-tabs-container[orient="vertical"]::part(items-wrapper) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: var(--tab-height-with-margin-padding) !important;
}

/* Make each pinned tab fill the row */
#pinned-tabs-container[orient="vertical"] > tab {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Show the tab title */
#pinned-tabs-container[orient="vertical"] .tab-label-container {
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* Left-align icon + title instead of centering the pinned content */
#pinned-tabs-container[orient="vertical"] .tab-content {
  justify-content: flex-start !important;
  padding-inline: var(--tab-inline-padding) !important;
}

/* Restore space between favicon and title */
#pinned-tabs-container[orient="vertical"] .tab-icon-stack {
  margin-inline-end: 8px !important;
}

FirefoxのUIは内部構造やCSS変数にけっこう依存しているので、アップデートでそのうち動かなくなるかもしれません。僕もGPTに何度か違うコードを出されて困りました。Firefox 156（Linux）で動作確認しています。

Firefoxの縦型タブ、ピン留めにも名前がほしい

参考