(core) Prevent raw table names from overflowing

Summary:
Modifies CSS so that text overflow is handled by displaying an
ellipsis when raw table names exceed the width of their container.

Test Plan: Tested manually.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D3524

app/client/components/DataTables.ts

@@ -63,7 +63,7 @@ export class DataTables extends Disposable {
                 )),
               ),
               cssMiddle(
-                css60(this._tableTitle(tableRec), testId('table-title')),
+                css60(cssTableTitle(this._tableTitle(tableRec), testId('table-title'))),
                 css40(
                   cssIdHoverWrapper(
                     cssUpperCase("Table id: "),
@@ -120,10 +120,7 @@ export class DataTables extends Disposable {
       } else {
         return dom('div', // to disable flex grow in the widget
           dom.domComputed(fromKo(table.rawViewSection), vs =>
-            dom.update(
+            buildTableName(vs, testId('widget-title'))
-              buildTableName(vs, testId('widget-title')),
-              dom.on('click', (ev) => { ev.stopPropagation(); ev.preventDefault(); }),
-            )
           )
         );
       }
@@ -242,14 +239,14 @@ const cssMiddle = styled('div', `
   margin-top: 6px;
   margin-bottom: 4px;
   .${cssList.className}-card & {
-    margin: 0px:
+    margin: 0px;
   }
 `);
 
 const css60 = styled('div', `
   min-width: min(240px, 100%);
-  display: flex;
   flex: 6;
+  margin-right: 4px;
 `);
 
 const css40 = styled('div', `
@@ -301,6 +298,10 @@ const cssTableId = styled(cssLine, `
   font-size: ${css.vars.smallFontSize};
 `);
 
+const cssTableTitle = styled('div', `
+  white-space: nowrap;
+`);
+
 const cssUpperCase = styled('span', `
   text-transform: uppercase;
   letter-spacing: 0.81px;

app/client/ui/WidgetTitle.ts

@@ -43,7 +43,8 @@ export function buildRenameWidget(
           attach: 'body',
           boundaries: 'viewport',
         });
-      }
+      },
+      dom.on('click', (ev) => { ev.stopPropagation(); ev.preventDefault(); }),
     ),
     ...args
   );

test/nbrowser/gristUtils.ts

@@ -1289,7 +1289,7 @@ export async function openRawTable(tableId: string) {
 export async function renameRawTable(tableId: string, newName: string) {
   await driver.find(`.test-raw-data-table .test-raw-data-table-id-${tableId}`)
     .findClosest('.test-raw-data-table')
-    .find('.test-raw-data-widget-title')
+    .find('.test-widget-title-text')
     .click();
   const input = await driver.find(".test-widget-title-table-name-input");
   await input.doClear();