Compact circuit grid columns

src/app/globals.css

@@ -359,7 +359,7 @@ body {
 
 .tree-grid {
   width: max-content;
-  min-width: 100%;
+  min-width: 0;
   border-collapse: collapse;
   font-size: 0.9rem;
 }
@@ -367,37 +367,50 @@ body {
 .tree-grid th,
 .tree-grid td {
   border: 1px solid #e4e9f2;
-  padding: 0.35rem 0.5rem;
+  padding: 0.35rem 0.4rem;
-  white-space: nowrap;
   vertical-align: middle;
 }
 
 .tree-grid th {
+  width: 1px;
   background: #f4f7fb;
   position: sticky;
   top: 0;
   z-index: 2;
   vertical-align: top;
+  white-space: normal;
+}
+
+.tree-grid td {
+  white-space: nowrap;
 }
 
 .tree-grid .header-cell {
   display: flex;
-  align-items: center;
+  flex-direction: column;
-  gap: 0.3rem;
+  align-items: stretch;
+  gap: 0.2rem;
+  min-width: 0;
 }
 
 .tree-grid .header-filter-btn {
+  display: block;
+  width: 100%;
   border: 1px solid #c4cddc;
   background: #fff;
   border-radius: 3px;
   font-size: 0.75rem;
   padding: 0.15rem 0.35rem;
+  white-space: nowrap;
 }
 
 .tree-grid .header-sort-btn {
-  display: inline-flex;
+  display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 0.25rem;
+  width: 100%;
+  min-width: 0;
   border: 0;
   background: transparent;
   padding: 0;
@@ -405,6 +418,9 @@ body {
   font: inherit;
   font-size: 0.78rem;
   font-weight: 600;
+  line-height: 1.15;
+  overflow-wrap: anywhere;
+  white-space: normal;
   text-align: left;
   cursor: pointer;
 }

src/frontend/components/circuit-tree-editor.tsx

@@ -155,6 +155,10 @@ function normalizeUiError(err: unknown): string {
   return message;
 }
 
+function getFullColumnLabel(column: ColumnDef): string {
+  return column.fullLabel ?? column.label;
+}
+
 function isPrintableKey(event: KeyboardEvent<HTMLElement>) {
   return event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey;
 }
@@ -491,7 +495,9 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
 
     const search = columnSearch.trim().toLocaleLowerCase("de-DE");
     const matchingColumns = orderedColumns.filter((column) =>
-      column.label.toLocaleLowerCase("de-DE").includes(search)
+      `${column.label} ${getFullColumnLabel(column)}`
+        .toLocaleLowerCase("de-DE")
+        .includes(search)
     );
 
     return (
@@ -535,7 +541,7 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
                   onClick={() => toggleColumnVisibility(column.key)}
                 >
                   <span className="selection-marker" aria-hidden="true">{visible ? "✓" : ""}</span>
-                  <span>{column.label}</span>
+                  <span>{getFullColumnLabel(column)}</span>
                 </button>
                 <div className="column-settings-order">
                   <button type="button" onClick={() => moveColumn(column.key, -1)} disabled={column.locked} title="Spalte nach links verschieben">
@@ -2760,8 +2766,8 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
                     <button
                       type="button"
                       className="header-sort-btn"
-                      aria-label={`${column.label} sortieren`}
+                      aria-label={`${getFullColumnLabel(column)} sortieren`}
-                      title="Zum Sortieren klicken"
+                      title={`${getFullColumnLabel(column)} – zum Sortieren klicken`}
                       onClick={() => {
                         setSortState((current) => {
                           if (!current || current.key !== column.key) {
@@ -2789,7 +2795,7 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
                       title={
                         (columnFilters[column.key]?.length ?? 0) > 0
                           ? `${columnFilters[column.key]?.length} Filterwert(e) ausgewählt`
-                          : `${column.label} filtern`
+                          : `${getFullColumnLabel(column)} filtern`
                       }
                     >
                       Filtern{(columnFilters[column.key]?.length ?? 0) > 0 ? ` (${columnFilters[column.key]?.length})` : ""}
@@ -2798,7 +2804,7 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
                   {openFilterColumn === column.key ? (
                     <div className="header-filter-menu">
                       <div className="header-filter-title-row">
-                        <strong>{column.label} filtern</strong>
+                        <strong>{getFullColumnLabel(column)} filtern</strong>
                         <button type="button" className="header-filter-close" onClick={closeColumnFilterMenu} aria-label="Filter schließen">
                           ×
                         </button>
@@ -2812,7 +2818,7 @@ export function CircuitTreeEditor(props: { projectId: string; circuitListId: str
                         value={filterValueSearch}
                         onChange={(event) => setFilterValueSearch(event.target.value)}
                         placeholder="Werte suchen …"
-                        aria-label={`Werte für ${column.label} suchen`}
+                        aria-label={`Werte für ${getFullColumnLabel(column)} suchen`}
                         autoFocus
                       />
                       <div className="header-filter-selection-actions">

src/frontend/utils/circuit-grid-model.ts

@@ -49,6 +49,7 @@ export type GridValue = string | number | boolean | undefined;
 export interface ColumnDef {
   key: CellKey;
   label: string;
+  fullLabel?: string;
   numeric?: boolean;
   defaultVisible?: boolean;
   locked?: boolean;
@@ -57,35 +58,64 @@ export interface ColumnDef {
 // BMK stays locked as the first column because circuit identity and circuit drag
 // handles depend on an always-visible equipment identifier.
 export const allColumns: ColumnDef[] = [
-  { key: "equipmentIdentifier", label: "Betriebsmittelkennzeichen", defaultVisible: true, locked: true },
+  {
+    key: "equipmentIdentifier",
+    label: "SK-Nr.",
+    fullLabel: "Stromkreisnummer / Betriebsmittelkennzeichen",
+    defaultVisible: true,
+    locked: true,
+  },
   { key: "displayName", label: "Anzeigename", defaultVisible: true },
   { key: "quantity", label: "Anzahl", numeric: true, defaultVisible: true },
-  { key: "powerPerUnit", label: "Leistung / Gerät [kW]", numeric: true, defaultVisible: true },
+  {
-  { key: "simultaneityFactor", label: "Gleichzeitigkeit", numeric: true, defaultVisible: true },
+    key: "powerPerUnit",
-  { key: "rowTotalPower", label: "Gesamtsumme [kW]", numeric: true, defaultVisible: true },
+    label: "P/Stk. [kW]",
+    fullLabel: "Leistung je Gerät [kW]",
+    numeric: true,
+    defaultVisible: true,
+  },
+  {
+    key: "simultaneityFactor",
+    label: "GZF",
+    fullLabel: "Gleichzeitigkeitsfaktor",
+    numeric: true,
+    defaultVisible: true,
+  },
+  {
+    key: "rowTotalPower",
+    label: "Ges.-Leistung [kW]",
+    fullLabel: "Gesamtleistung [kW]",
+    numeric: true,
+    defaultVisible: true,
+  },
   { key: "protectionSummary", label: "Schutz", defaultVisible: true },
   { key: "cableSummary", label: "Kabel", defaultVisible: true },
   { key: "roomSummary", label: "Raum", defaultVisible: true },
   { key: "remark", label: "Bemerkung", defaultVisible: true },
-  { key: "technicalName", label: "Technischer Name" },
+  { key: "technicalName", label: "Techn. Name", fullLabel: "Technischer Name" },
-  { key: "connectionKind", label: "Anschlussart" },
+  { key: "connectionKind", label: "Anschluss", fullLabel: "Anschlussart" },
   { key: "phaseType", label: "Phasenart" },
-  { key: "costGroup", label: "Kostengruppe" },
+  { key: "costGroup", label: "KG", fullLabel: "Kostengruppe" },
   { key: "category", label: "Kategorie" },
   { key: "level", label: "Ebene" },
-  { key: "roomNumberSnapshot", label: "Raumnummer" },
+  { key: "roomNumberSnapshot", label: "Raum-Nr.", fullLabel: "Raumnummer" },
   { key: "roomNameSnapshot", label: "Raumname" },
   { key: "cosPhi", label: "cos φ", numeric: true },
   { key: "protectionType", label: "Schutzart" },
-  { key: "protectionRatedCurrent", label: "Bemessungsstrom", numeric: true },
+  {
+    key: "protectionRatedCurrent",
+    label: "Bem.-Strom",
+    fullLabel: "Bemessungsstrom",
+    numeric: true,
+  },
   { key: "protectionCharacteristic", label: "Charakteristik" },
   { key: "cableType", label: "Kabeltyp" },
-  { key: "cableCrossSection", label: "Kabelquerschnitt" },
+  { key: "cableCrossSection", label: "Querschnitt", fullLabel: "Kabelquerschnitt" },
   { key: "cableLength", label: "Kabellänge", numeric: true },
   { key: "rcdAssignment", label: "RCD-Zuordnung" },
-  { key: "terminalDesignation", label: "Klemmenbezeichnung" },
+  { key: "terminalDesignation", label: "Klemme", fullLabel: "Klemmenbezeichnung" },
   { key: "voltage", label: "Spannung", numeric: true },
-  { key: "controlRequirement", label: "Steuerungsanforderung" },
+  { key: "controlRequirement", label: "Steuerung", fullLabel: "Steuerungsanforderung" },
   { key: "status", label: "Status" },
   { key: "isReserve", label: "Reserve" },
 ];

tests/circuit-grid-model.test.ts

@@ -65,6 +65,11 @@ describe("circuit grid model", () => {
 
   it("keeps the equipment identifier locked as the first column", () => {
     assert.equal(allColumns[0].key, "equipmentIdentifier");
+    assert.equal(allColumns[0].label, "SK-Nr.");
+    assert.equal(
+      allColumns[0].fullLabel,
+      "Stromkreisnummer / Betriebsmittelkennzeichen"
+    );
     assert.equal(allColumns[0].locked, true);
   });