Fix group header horizontal scrolling

mathesar_ui/src/systems/table-view/row/GroupHeader.svelte

@@ -20,6 +20,9 @@
   export let recordSummariesForSheet: RecordSummariesForSheet;
   export let fileManifestsForSheet: AssociatedCellValuesForSheet<FileManifest>;
 
+  let containerElement: HTMLElement;
+  let containerWidth = 0;
+
   $: ({ columnIds, preprocIds } = grouping);
   $: preProcFunctionsForColumn = columnIds.map(
     (columnId) =>
@@ -32,10 +35,27 @@
         )?.name
       : undefined,
   );
+
+  function handleWheel(event: WheelEvent) {
+    // Pass horizontal scroll to the parent sheet
+    if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
+      const sheetBody = containerElement?.closest(
+        '[data-sheet-element="body"]',
+      );
+      if (sheetBody) {
+        sheetBody.scrollLeft += event.deltaX;
+      }
+    }
+  }
 </script>
 
 <SheetPositionableCell index={0} columnSpan={processedColumnsMap.size + 1}>
-  <div class="group-header">
+  <div
+    class="group-header"
+    bind:this={containerElement}
+    bind:clientWidth={containerWidth}
+    on:wheel={handleWheel}
+  >
     <div class="groups-data">
       {#each columnIds as columnId, index (columnId)}
         {@const stringColumnId = String(columnId)}
@@ -49,6 +69,7 @@
           preprocName={preprocNames[index]}
           {fileManifestsForSheet}
           totalColumns={columnIds.length}
+          {containerWidth}
         />
       {/each}
       <div class="count-container">
@@ -62,25 +83,31 @@
 
 <style lang="scss">
   .group-header {
+    position: sticky;
+    left: 0;
+    z-index: var(--z-index__sheet__row-header-cell);
     padding: var(--sm4) var(--lg1);
     background-color: var(--color-bg-header);
     height: 100%;
     border-bottom: 1px solid var(--color-border-grid);
     border-right: 1px solid var(--color-border-grid);
     overflow: hidden;
+    cursor: default;
 
     .groups-data {
       align-items: start;
       display: flex;
       gap: 1rem;
       overflow: hidden;
+      width: 100%;
     }
 
     .count-container {
       --badge-font-size: var(--sm1);
       --badge-text-color: var(--color-fg-subtle-1);
       --badge-background-color: var(--color-bg-sunken-1-hover);
       height: 100%;
+      flex-shrink: 0;
     }
   }
 </style>

mathesar_ui/src/systems/table-view/row/GroupHeaderCellValue.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { FileManifest, ResultValue } from '@mathesar/api/rpc/records';
-  import { Truncate } from '@mathesar/component-library';
+  import { Tooltip, Truncate } from '@mathesar/component-library';
   import CellValue from '@mathesar/components/CellValue.svelte';
   import { parseFileReference } from '@mathesar/components/file-attachments/fileUtils';
   import LinkedRecord from '@mathesar/components/LinkedRecord.svelte';
@@ -15,6 +15,7 @@
   export let cellValue: ResultValue | undefined = undefined;
   export let fileManifestsForSheet: AssociatedCellValuesForSheet<FileManifest>;
   export let totalColumns: number;
+  export let containerWidth = 0;
 
   $: processedColumn = processedColumnsMap.get(columnId);
   $: recordId = String(cellValue);
@@ -27,39 +28,93 @@
     if (!fileReference) return undefined;
     return fileManifestsForSheet.get(columnId)?.get(fileReference.mash);
   })();
+
+  // Calculate equal width for all items considering padding and gaps
+  // Reserve space for count badge (~80px) and gaps (1rem each)
+  const BADGE_WIDTH = 80;
+  const GAP_WIDTH = 16; // 1rem
+  $: availableWidth =
+    containerWidth > 0
+      ? Math.max(
+          0,
+          containerWidth - BADGE_WIDTH - totalColumns * GAP_WIDTH - 32,
+        ) // 32 for padding
+      : 0;
+  $: maxItemWidth =
+    availableWidth > 0 && totalColumns > 0
+      ? Math.floor(availableWidth / totalColumns)
+      : 0;
+
+  $: displayValue = (() => {
+    if (recordSummary) return recordSummary;
+    if (fileManifest) return fileManifest.uri;
+    return cellValue;
+  })();
+
+  $: tooltipText = (() => {
+    const columnName = processedColumn?.column.name ?? '';
+    const preprocText = preprocName ? ` (${preprocName})` : '';
+    let valueText = '';
+    if (
+      typeof displayValue === 'object' &&
+      displayValue !== null &&
+      'summaryLabel' in displayValue
+    ) {
+      valueText = String(
+        (displayValue as { summaryLabel: unknown }).summaryLabel,
+      );
+    } else {
+      valueText = String(displayValue ?? '');
+    }
+    return `${columnName}${preprocText}: ${valueText}`;
+  })();
 </script>
 
-<span class="tag" style="max-width: calc(100%/{totalColumns})">
-  <span class="name">
-    {processedColumn?.column.name ?? ''}
-    {#if preprocName}
-      <span class="preproc">{preprocName}</span>
-    {/if}
-  </span>
-  <span class="value">
-    {#if recordSummary}
-      <LinkedRecord
-        {recordSummary}
-        {recordId}
-        tableId={linkedTableId}
-        allowsHyperlinks
-      />
-    {:else if processedColumn?.abstractType.identifier === 'file' && fileManifest}
-      <Truncate>
-        {fileManifest.uri}
-      </Truncate>
-    {:else}
+<Tooltip placement="top">
+  <span
+    slot="trigger"
+    class="tag"
+    style:max-width={maxItemWidth > 0 ? `${maxItemWidth}px` : 'none'}
+    style:flex-basis={maxItemWidth > 0 ? `${maxItemWidth}px` : 'auto'}
+  >
+    <span class="name">
       <Truncate>
-        <CellValue value={cellValue} />
+        {processedColumn?.column.name ?? ''}
+        {#if preprocName}
+          <span class="preproc">{preprocName}</span>
+        {/if}
       </Truncate>
-    {/if}
+    </span>
+    <span class="value">
+      {#if recordSummary}
+        <LinkedRecord
+          {recordSummary}
+          {recordId}
+          tableId={linkedTableId}
+          allowsHyperlinks
+        />
+      {:else if processedColumn?.abstractType.identifier === 'file' && fileManifest}
+        <Truncate>
+          {fileManifest.uri}
+        </Truncate>
+      {:else}
+        <Truncate>
+          <CellValue value={cellValue} />
+        </Truncate>
+      {/if}
+    </span>
   </span>
-</span>
+  <div slot="content">{tooltipText}</div>
+</Tooltip>
 
 <style lang="scss">
   .tag {
     overflow: hidden;
     min-width: 3em;
+    flex-shrink: 1;
+    flex-grow: 0;
+    display: flex;
+    flex-direction: column;
 
     .name {
       font-size: var(--sm1);
@@ -68,16 +123,19 @@
       align-items: center;
       gap: 0.14rem;
       margin-bottom: 0.2rem;
+      overflow: hidden;
 
       .preproc {
         font-size: var(--sm3);
         border: 1px solid var(--color-fg-base-muted);
         padding: 0rem 0.3rem;
         border-radius: 5rem;
+        flex-shrink: 0;
       }
     }
     .value {
       font-size: var(--lg1);
+      overflow: hidden;
     }
   }
 </style>

mathesar_ui/src/systems/table-view/table-inspector/TableInspector.svelte

@@ -5,7 +5,7 @@
   import InspectorTabContent from '@mathesar/components/InspectorTabContent.svelte';
   import type { Table } from '@mathesar/models/Table';
   import { isTableView } from '@mathesar/utils/tables';
-  import { TabContainer, defined } from '@mathesar-component-library';
+  import { TabContainer } from '@mathesar-component-library';
 
   import CellMode from './cell/CellMode.svelte';
   import ColumnMode from './column/ColumnMode.svelte';