Hide empty task tabs and move tabs that don't fit into a More menu

web/style.css

@@ -350,6 +350,42 @@ a.task-link {
   margin-left: 6px;
 }
 
+.pane-tabs button[hidden] {
+  display: none;
+}
+
+.pane-tabs button:not(.task-picker) {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.tab-menu {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  padding: 4px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--raised);
+  color: var(--text);
+  box-shadow: var(--shadow);
+}
+
+.tab-menu:popover-open {
+  display: flex;
+  flex-direction: column;
+}
+
+.tab-menu button {
+  border: none;
+  background: transparent;
+  text-align: left;
+}
+
+.tab-menu button:hover {
+  background: var(--surface);
+}
+
 .pane-body,
 .view,
 .transcript-view,