Give the file name the row, and stop repeating the project

On a real project the name lost the width fight and the trailing text read
"MyGame.Runtime MyGame.Runtime" — the directory and the project were the
same string, printed twice.

- The detail text now has a shrink factor of 1000 against the name's 1, plus
  a 45% cap, so it gives up its width first and the name is the last thing to
  ellipsize.
- A directory that already begins with the project name says everything the
  project name would, so only one of the two is shown.
- verticalTabs.showDirectory became never / duplicates / always, defaulting
  to duplicates: width goes to a directory only when two open tabs share a
  file name, which is the usual reason to want it. Turning showProject off
  as well gives the name the whole row.
- The trailing text is composed in the extension now rather than the webview,
  so the deduplication is unit-testable and there is one implementation.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

media/tabs.css

@@ -78,6 +78,8 @@ body {
 
 /* --- the file name ------------------------------------------------------ */
 
+/* The name is the point of the row, so it shrinks last: the detail text has a huge
+   shrink factor and gives up its width first. */
 .name {
     display: flex;
     flex: 1 1 auto;
@@ -102,12 +104,14 @@ body {
     font-style: italic;
 }
 
-.dir {
-    flex: 0 1 auto;
+.detail {
+    flex: 0 1000 auto;
     min-width: 0;
+    max-width: 45%;
     overflow: hidden;
     color: var(--vscode-descriptionForeground);
     font-size: 0.9em;
+    text-align: right;
     text-overflow: ellipsis;
     white-space: nowrap;
 }