allow file tabs to be smaller again

- we didn't do this before so they are also readable, but with the "new"
  side tabs, that argument no longer applies

Author: williamstein

src/packages/frontend/components/sortable-tabs.tsx

@@ -92,11 +92,15 @@ export function SortableTabs(props: Props) {
       lastRef.current.length = items.length;
       return last.itemWidth;
     }
+    // resize?.width - 46 - the minus 46 is to take into account the "..." dropdown.
     const itemWidth =
       Math.max(
-        180,
-        Math.min(250 + 65, (resize?.width ?? 0) / Math.max(1, items.length))
-      ) - 70; // the constant accounts for the margin and x for an antd tab.
+        80,
+        Math.min(
+          250 + 65,
+          ((resize?.width ?? 500) - 46 ?? 0) / Math.max(1, items.length),
+        ),
+      ) - 55; // the constant accounts for the margin and x for an antd tab.
     lastRef.current = {
       width: resize.width ?? 0,
       length: items.length,

src/packages/frontend/project/page/file-tab.tsx

@@ -320,6 +320,8 @@ export function FileTab(props: Readonly<Props>) {
 
   // how to read: default color -> style for component -> override color if there is activity
   const icon_style: CSSProperties = {
+    marginRight: "2px",
+    marginLeft: "-10px",
     color: COLORS.FILE_ICON,
     ...props.iconStyle,
     ...(has_activity ? { color: "orange" } : undefined),
@@ -473,11 +475,10 @@ export function FileTab(props: Readonly<Props>) {
 }
 
 const LABEL_STYLE: CSS = {
-  maxWidth: "250px",
   overflow: "hidden",
-  textOverflow: "ellipsis",
+  //textOverflow: "ellipsis",
+  margin: "auto",
   whiteSpace: "nowrap",
-  marginRight: "-15px", // this makes a lot more of the filename visible by undoing the antd tab spacing.
 } as const;
 
 const FULLPATH_LABEL_STYLE: CSS = {

src/packages/frontend/project/page/file-tabs.tsx

@@ -31,7 +31,7 @@ function Label({ path, project_id, label }) {
       path={path}
       label={label}
       noPopover={active != null}
-      style={width != null ? { width } : undefined}
+      style={width != null ? { width, marginRight: "-10px" } : undefined}
     />
   );
 }