fix: allow table columns to specify overflow

With the previous table (<1.6), column widths were variable and this
caused problems:
- sometimes a long image name would cause the tables to require
  horizontal scrolling
- sometimes a change in one column would cause other columns to shift
  E.g. starting a container can cause the start/stop button to jump
  right, and stopping the container the button jumps left, so you
  might click the wrong button (e.g. delete).

With the new grid-based table component, column widths are fixed so
content doesn't affect table width. This solves the previous issues,
but it means that simple columns with long content are more likely to
have overflow. This was 'fixed' in #4841 by setting a maximum column
width and overflow-hidden to limit rendering to within the cell, but
now things like popup menus can't go outside of the cells.

I've struggled deciding what the correct default behaviour should be,
but I still think #4841 is correct and means the average renderer can
stay simple. This change adds a new 'overflow' property to allow
renderers that are more interesting to control their own behaviour
and render 'outside' of their cell.

Property added to both image and volume action columns.

Fixes #5220.

Signed-off-by: Tim deBoer <git@tdeboer.ca>

packages/renderer/src/lib/image/ImagesList.svelte

@@ -213,7 +213,7 @@ const columns: Column<ImageInfoUI>[] = [
   envColumn,
   ageColumn,
   sizeColumn,
-  new Column<ImageInfoUI>('Actions', { align: 'right', width: '150px', renderer: ImageColumnActions }),
+  new Column<ImageInfoUI>('Actions', { align: 'right', width: '150px', renderer: ImageColumnActions, overflow: true }),
 ];
 
 const row = new Row<ImageInfoUI>({ selectable: image => !image.inUse, disabledText: 'Image is used by a container' });

packages/renderer/src/lib/table/Table.svelte

@@ -184,7 +184,7 @@ function setGridColumns() {
               ? 'justify-self-end'
               : column.info.align === 'center'
                 ? 'justify-self-center'
-                : 'justify-self-start'} self-center overflow-hidden max-w-full"
+                : 'justify-self-start'} self-center {column.info.overflow === true ? '' : 'overflow-hidden'} max-w-full"
             role="cell">
             {#if column.info.renderer}
               <svelte:component

packages/renderer/src/lib/table/table.ts

@@ -68,6 +68,18 @@ export interface ColumnInformation<Type, RenderType = Type> {
    * Defaults to 'ascending'.
    */
   readonly initialOrder?: 'ascending' | 'descending';
+
+  /**
+   * By default, columns are limited to rendering within their
+   * own cell to stop long or extraneous content (e.g. long
+   * user-provided names) from interfering with other columns.
+   * More advanced column renderers that need to render outside
+   * of their cells (e.g. with popup menus or tooltips) can use
+   * this property to allow this behaviour.
+   *
+   * Defaults to 'false'.
+   */
+  readonly overflow?: boolean;
 }
 
 /**

packages/renderer/src/lib/volume/VolumesList.svelte

@@ -209,7 +209,7 @@ const columns: Column<VolumeInfoUI, VolumeInfoUI | string>[] = [
   envColumn,
   ageColumn,
   sizeColumn,
-  new Column<VolumeInfoUI>('Actions', { align: 'right', renderer: VolumeColumnActions }),
+  new Column<VolumeInfoUI>('Actions', { align: 'right', renderer: VolumeColumnActions, overflow: true }),
 ];
 
 const row = new Row<VolumeInfoUI>({