fix: wrap tables in scrollable containers (#226)

fix


![image](https://github.com/user-attachments/assets/f205f183-84a5-4aae-b3c4-30d16a23f556)

---------

Co-authored-by: Tomás Grüner <[email protected]>

Author: pgallino

src/graphics/basic_components/table.ts

@@ -15,6 +15,7 @@ export interface TableOptions {
 export class Table {
   private table: HTMLTableElement;
   private tbody: HTMLTableSectionElement;
+  private tableWrapper: HTMLDivElement;
 
   constructor(private options: TableOptions) {
     this.table = document.createElement("table");
@@ -26,6 +27,13 @@ export class Table {
     }
 
     this.initializeTable();
+
+    // Create a wrapper for the table
+    const wrapper = document.createElement("div");
+    wrapper.classList.add(CSS_CLASSES.TABLE_CONTAINER);
+    wrapper.appendChild(this.table);
+
+    this.tableWrapper = wrapper;
   }
 
   private initializeTable(): void {
@@ -187,7 +195,7 @@ export class Table {
     this.tbody.innerHTML = ""; // Clear all rows from tbody
   }
 
-  toHTML(): HTMLTableElement {
-    return this.table;
+  toHTML(): HTMLElement {
+    return this.tableWrapper;
   }
 }

src/graphics/basic_components/text_info.ts

@@ -193,11 +193,7 @@ export class TextInfo {
       ),
       fieldsPerRow: Object.keys(flags).length,
       rows: [statusRow, valueRow],
-      tableClasses: [
-        CSS_CLASSES.TABLE,
-        CSS_CLASSES.RIGHT_BAR_TABLE,
-        CSS_CLASSES.TCP_FLAGS_TABLE,
-      ],
+      tableClasses: [CSS_CLASSES.TABLE, CSS_CLASSES.RIGHT_BAR_TABLE],
     });
 
     // Get the table element

src/graphics/renderables/arp_table.ts

@@ -21,7 +21,6 @@ export class ArpTable {
 
   constructor(private props: ArpTableProps) {
     this.container = document.createElement("div");
-    this.container.className = CSS_CLASSES.ROUTING_TABLE_CONTAINER;
 
     const { onEdit, onRegenerate, onDelete } = this.setArpTableCallbacks();
 
@@ -38,14 +37,10 @@ export class ArpTable {
       headers: headers,
       fieldsPerRow: 2, // IP and MAC
       rows: props.rows,
-      editableColumns: [false, true], // Make all columns non-editable
+      editableColumns: [false, true], // Make the MAC address column editable
       onEdit: onEdit,
       onDelete: onDelete,
-      tableClasses: [
-        CSS_CLASSES.TABLE,
-        CSS_CLASSES.RIGHT_BAR_TABLE,
-        CSS_CLASSES.ARP_TABLE,
-      ],
+      tableClasses: [CSS_CLASSES.TABLE, CSS_CLASSES.RIGHT_BAR_TABLE],
     });
 
     this.toggleButton = new ToggleButton({

src/graphics/renderables/program_runner_info.ts

@@ -13,7 +13,7 @@ import { attachTooltip } from "./tooltip_manager";
 export class ProgramRunnerInfo implements Renderable {
   private runner: ProgramRunner;
   private inputFields: Node[] = [];
-  private runningProgramsTable: HTMLTableElement;
+  private runningProgramsTable: HTMLElement;
 
   constructor(runner: ProgramRunner, programInfos: ProgramInfo[]) {
     this.runner = runner;
@@ -88,7 +88,7 @@ export class ProgramRunnerInfo implements Renderable {
   private createProgramsTable(
     runner: ProgramRunner,
     runningPrograms: RunningProgram[],
-  ): HTMLTableElement {
+  ): HTMLElement {
     const onDelete = (row: number) => {
       const { pid } = runningPrograms[row];
       runner.removeRunningProgram(pid);
@@ -129,7 +129,7 @@ export class ProgramRunnerInfo implements Renderable {
     this.runningProgramsTable = newTable;
   }
 
-  private generateProgramsTable(): HTMLTableElement {
+  private generateProgramsTable(): HTMLElement {
     const runningPrograms = this.runner.getRunningPrograms();
     if (runningPrograms.length === 0) {
       return document.createElement("table");

src/graphics/renderables/routing_table.ts

@@ -22,7 +22,6 @@ export class RoutingTable {
 
   constructor(private props: RoutingTableProps) {
     this.container = document.createElement("div");
-    this.container.className = CSS_CLASSES.ROUTING_TABLE_CONTAINER;
 
     const { onEdit, onDelete, onRegenerate } = this.setRoutingTableCallbacks(
       props.viewgraph,
@@ -46,11 +45,7 @@ export class RoutingTable {
       editableColumns: [false, true, true, false], // Make the last column non-editable
       onEdit: onEdit,
       onDelete: onDelete,
-      tableClasses: [
-        CSS_CLASSES.TABLE,
-        CSS_CLASSES.RIGHT_BAR_TABLE,
-        CSS_CLASSES.ROUTER_TABLE,
-      ],
+      tableClasses: [CSS_CLASSES.TABLE, CSS_CLASSES.RIGHT_BAR_TABLE],
     });
 
     this.toggleButton = new ToggleButton({

src/styles/table.css

@@ -1,61 +1,58 @@
-/* Common styles for both tables */
-.table-base {
+/* CONTAINER that allows horizontal scroll if needed */
+.right-bar-table-container {
+  overflow-x: auto;
+  display: block;
+  border-radius: 1rem;
   width: 100%;
+}
+
+/* TABLE that adapts: fills 100% if it fits, but can expand beyond */
+.right-bar-table {
+  min-width: 100%; /* At least fills the container */
+  width: max-content; /* Expands to fit content if needed */
   border-collapse: collapse;
   font-size: 1rem;
   text-align: center;
   border-radius: 1rem;
   box-shadow: 0 0.5vh 1vh rgba(0, 0, 0, 0.1);
   clip-path: inset(0 round 1rem);
-  overflow-x: auto;
-}
-
-/* Common cell styles */
-.table-base th,
-.table-base td {
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  white-space: normal;
-  padding: 1vh;
-  border: 0.2vh solid #ddd;
-  text-align: center;
 }
 
-.table-base th {
+/* TABLE HEADER */
+.right-bar-table th {
   background-color: #333;
   color: white;
+  padding: 1vh;
+  border: 0.2vh solid #ddd;
   box-sizing: border-box;
+  white-space: nowrap; /* Prevents line breaks in headers */
 }
 
-.table-base td {
+/* TABLE CELLS */
+.right-bar-table td {
+  padding: 1vh;
+  border: 0.2vh solid #ddd;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  white-space: nowrap; /* Prevents breaking key content */
   transition: background-color 0.3s ease-in-out;
 }
 
-.table-base td:hover {
+/* HOVER effect for cells */
+.right-bar-table td:hover {
   background-color: #f0f0f0;
   cursor: pointer;
 }
 
-/* TCP FLAGS TABLE specific styles */
-.tcp-flags-table {
-  display: table;
-  table-layout: auto;
-}
-
-.tcp-flags-table tr:nth-child(even) {
+/* ALTERNATE ROW COLORS */
+.right-bar-table tr:nth-child(even) {
   background-color: #f9f9f9;
 }
 
-.tcp-flags-table tr:nth-child(odd) {
+.right-bar-table tr:nth-child(odd) {
   background-color: #fff;
 }
 
-/* TCP table container for proper scrolling */
-.tcp-flags-table-container {
-  overflow-x: auto;
-  border-radius: 1rem;
-}
-
 /* ROUTER TABLE specific styles */
 .router-table {
   display: block;

src/utils/constants/css_constants.ts

@@ -1,39 +1,23 @@
 export const CSS_CLASSES = {
   // General
-  HIDDEN: "hidden",
-  SELECTED: "selected",
-  DISABLED: "disabled",
   SHOW: "show",
-  HIDE: "hide",
-  ACTIVE: "active",
-  INACTIVE: "inactive",
   BLOCK: "block",
 
   CENTRAL_LABEL: "central-label",
 
   // Right Bar
-  RIGHT_BAR: "right-bar",
   RIGHT_BAR_BUTTON: "right-bar-button",
   RIGHT_BAR_TOGGLE_BUTTON: "right-bar-toggle-button",
   RIGHT_BAR_DELETE_BUTTON: "right-bar-delete-button",
   RIGHT_BAR_CONNECT_BUTTON: "right-bar-connect-button",
   RIGHT_BAR_START_BUTTON: "right-bar-start-button",
 
   // Table
-  TABLE: "table-base",
-  TCP_FLAGS_TABLE: "tcp-flags-table",
-  ROUTER_TABLE: "router-table",
-  ARP_TABLE: "arp-table",
+  TABLE_CONTAINER: "right-bar-table-container",
+  TABLE: "table",
   RIGHT_BAR_TABLE: "right-bar-table",
-  TOGGLE_TABLE: "toggle-table",
-  TABLE_WRAPPER: "table-wrapper",
-  EDITABLE_CELL: "editable-cell",
-
-  // Routing Table
-  ROUTING_TABLE_CONTAINER: "routing-table-container",
 
   // Dropdown
-  DROPDOWN_CONTAINER: "dropdown-container",
   CUSTOM_DROPDOWN: "custom-dropdown",
   SELECTED_OPTION: "selected-option",
   OPTIONS_CONTAINER: "options-container",
@@ -45,28 +29,13 @@ export const CSS_CLASSES = {
   TRASH_BUTTON: "trash-button",
   REGENERATE_BUTTON: "regenerate-button",
 
-  // Tooltips
-  HAS_TOOLTIP: "has-tooltip",
-  GLOBAL_TOOLTIP: "global-tooltip",
-
   // Parameter Editor
-  PARAMETER_EDITOR_CONTAINER: "parameter-editor-container",
   PARAMETER_EDITOR: "parameter-editor",
   PARAMETER_EDITOR_LABEL: "parameter-editor-label",
   PARAMETER_EDITOR_INPUT: "parameter-editor-input",
   PARAMETER_GROUP: "parameter-group",
-  PARAMETER_GROUP_TITLE: "parameter-group-title",
-
-  // Modal
-  MODAL_OVERLAY: "modal-overlay",
-  MODAL_CONTENT: "modal-content",
-  MODAL_BODY: "modal-body",
-  SAVE_BUTTON: "save-button",
-  CLOSE_BUTTON: "close",
 
   // Info
-  TOGGLE_INFO_CONTAINER: "toggle-info-container",
-  RIGHT_BAR_INFO: "right-bar-info",
   DETAIL_ITEM: "detail-item",
   DETAIL_CONTAINER: "detail-container",
   DETAIL_KEY: "detail-key",
@@ -82,10 +51,6 @@ export const CSS_CLASSES = {
   TCP_FLAG_INACTIVE: "tcp-flag-inactive",
   TCP_FLAG_HEADER: "tcp-flag-header",
 
-  // Layer Selector
-  LAYER_SELECTOR_CONTAINER: "layer-selector-container",
-  LAYER_SELECTOR_DROPDOWN: "layerselectordropdown",
-
   // Speed Wheel
   SPEED_WHEEL_CONTAINER: "speed-control-container",
   SLIDER_CONTAINER: "slider-container",