Add edit button to column list, fix truncation on small panels

src/app/column-editor/column-editor.component.ts

@@ -4,11 +4,12 @@ import { Column } from '../duckdb.service';
 import { Checkbox, CheckboxChangeEvent } from 'primeng/checkbox';
 import { FormsModule } from '@angular/forms';
 import { Button } from 'primeng/button';
+import { Tooltip } from 'primeng/tooltip';
 
 @Component({
   selector: 'app-column-editor',
   standalone: true,
-  imports: [AccordionModule, Checkbox, FormsModule, Button],
+  imports: [AccordionModule, Checkbox, FormsModule, Button, Tooltip],
   template: `
     <p-accordion [value]="0">
       <p-accordion-panel [value]="0">
@@ -26,11 +27,18 @@ import { Button } from 'primeng/button';
                 />
                 <label
                   [for]="column.name"
-                  class="ml-2 grow shrink basis-0 truncate"
+                  [pTooltip]="column.name"
+                  tooltipPosition="bottom"
+                  class="ml-2 grow shrink basis-0 truncate cursor-pointer"
                 >
                   {{ column.name }}
                 </label>
-                <p-button icon="pi pi-pencil" text> </p-button>
+                <p-button
+                  (onClick)="editColumn($index)"
+                  icon="pi pi-pencil"
+                  text
+                  pTooltip="Edit Column"
+                ></p-button>
               </li>
             }
           </ul>
@@ -56,4 +64,6 @@ export class ColumnEditorComponent {
       return columns;
     });
   }
+
+  protected editColumn(index: number) {}
 }