From a910d1e399682b1771299fecc43c88d1a2542fa0 Mon Sep 17 00:00:00 2001
From: Fidelis Huber <fidi.huber@gmail.com>
Date: Fri, 21 Aug 2026 19:38:07 +0200
Subject: [PATCH] Replace horizontal-scroll table with a stacked card layout on
 mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Materialliste war auf schmalen Screens nur per Seitwärts-Scrollen lesbar.
Ab 680px Breite wird jede Zeile jetzt als Karte dargestellt (CSS Grid mit
benannten Areas, Bezeichnung prominent oben, Menge/Einheit/Art.-Nr./Notiz
darunter beschriftet, Position + Löschen-Button in der Kopfzeile der Karte).
Die Grid-Areas ordnen die Felder unabhängig von der DOM-Reihenfolge um, die
Desktop-Tabelle bleibt unverändert in der ursprünglichen Spaltenreihenfolge.

Temporärer test-build-only.yml Workflow zur Verifikation ohne Registry-Push.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .gitea/workflows/test-build-only.yml | 12 ++++++++
 client/src/pages/ProjektDetail.tsx   | 16 +++++-----
 client/src/styles.css                | 45 ++++++++++++++++++++++++++++
 3 files changed, 65 insertions(+), 8 deletions(-)
 create mode 100644 .gitea/workflows/test-build-only.yml

diff --git a/.gitea/workflows/test-build-only.yml b/.gitea/workflows/test-build-only.yml
new file mode 100644
index 0000000..fb73e32
--- /dev/null
+++ b/.gitea/workflows/test-build-only.yml
@@ -0,0 +1,12 @@
+name: Test Build Only (temporary, no push)
+
+on:
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: linux
+    steps:
+      - uses: actions/checkout@v4
+      - name: Docker build (no push)
+        run: docker build -t materialschein-test:local .
diff --git a/client/src/pages/ProjektDetail.tsx b/client/src/pages/ProjektDetail.tsx
index 1c140bf..58dcfb7 100644
--- a/client/src/pages/ProjektDetail.tsx
+++ b/client/src/pages/ProjektDetail.tsx
@@ -355,22 +355,22 @@ export default function ProjektDetail() {
               <tbody>
                 {matList.map((r, i) => (
                   <tr key={r.id} className={selected.has(r.id) ? 'row-selected' : undefined}>
-                    <td className="chk-col">
+                    <td className="chk-col td-chk">
                       <input type="checkbox" className="row-check" checked={selected.has(r.id)} onChange={e => toggleRowSelect(r.id, e.target.checked)} />
                     </td>
-                    <td className="pos-nr">{i + 1}</td>
-                    <td>
+                    <td className="pos-nr td-pos" data-label="Pos.">{i + 1}</td>
+                    <td className="td-menge" data-label="Menge">
                       <input key={r.menge} className="qty-input" type="number" inputMode="decimal" min={0} step={0.1} defaultValue={r.menge} onBlur={e => updateMenge(r, e.target.value)} />
                       <span className="print-only">{fmt1(r.menge)}</span>
                     </td>
-                    <td>{r.einheit}</td>
-                    <td className="art-cell">{r.artNr || '—'}</td>
-                    <td>{r.bezeichnung}</td>
-                    <td>
+                    <td className="td-einh" data-label="Einheit">{r.einheit}</td>
+                    <td className="art-cell td-art" data-label="Art.-Nr.">{r.artNr || '—'}</td>
+                    <td className="td-bez">{r.bezeichnung}</td>
+                    <td className="td-notiz" data-label="Notiz">
                       <input key={r.notiz ?? ''} className="notiz-input" type="text" placeholder="…" defaultValue={r.notiz ?? ''} onBlur={e => updateNotiz(r, e.target.value)} />
                       <span className="print-only">{r.notiz}</span>
                     </td>
-                    <td><button className="del-btn" onClick={() => deleteRow(r)}>✕</button></td>
+                    <td className="td-del"><button className="del-btn" onClick={() => deleteRow(r)}>✕</button></td>
                   </tr>
                 ))}
               </tbody>
diff --git a/client/src/styles.css b/client/src/styles.css
index c9c37fe..1f50d5a 100644
--- a/client/src/styles.css
+++ b/client/src/styles.css
@@ -225,3 +225,48 @@ table.pinfo td:last-child{text-align:right;font-weight:600}
   .print-bar .btn{flex:1}
   .hdr-name,.hdr-role{display:none}
 }
+
+/* Materialliste auf schmalen Screens: Karten statt Tabelle mit Horizontal-Scroll */
+@media(max-width:680px){
+  .table-wrap{overflow-x:visible;border:none}
+  .mat-table{min-width:0;width:100%;border-collapse:separate;border-spacing:0}
+  .mat-table thead{display:none}
+  .mat-table tbody{display:flex;flex-direction:column;gap:10px}
+  .mat-table tr{
+    display:grid;
+    grid-template-columns:auto 1fr auto;
+    grid-template-areas:
+      "chk pos del"
+      "bez bez bez"
+      "menge menge menge"
+      "einh einh einh"
+      "art art art"
+      "notiz notiz notiz";
+    column-gap:8px;
+    background:var(--bg2);border:1px solid var(--bor);border-radius:12px;padding:12px 14px;
+  }
+  .mat-table tr.row-selected{background:rgba(255,176,96,.09);border-color:rgba(255,176,96,.4)}
+  .mat-table td{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dashed rgba(34,71,95,.6);font-size:12.5px}
+  .mat-table td::before{content:attr(data-label);font-size:9.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;flex-shrink:0}
+
+  .mat-table td.td-chk{grid-area:chk;border-bottom:none;padding:0;align-items:flex-start}
+  .mat-table td.td-chk::before{content:none}
+
+  .mat-table td.td-pos{grid-area:pos;border-bottom:none;padding:0;font-size:10.5px;color:var(--muted);justify-content:flex-start}
+  .mat-table td.td-pos::before{content:'Pos. '}
+
+  .mat-table td.td-del{grid-area:del;border-bottom:none;padding:0;justify-content:flex-end}
+  .mat-table td.td-del::before{content:none}
+
+  .mat-table td.td-bez{
+    grid-area:bez;border-bottom:1px solid var(--bor);padding:8px 0 10px;margin-bottom:2px;
+    font-size:15px;font-weight:800;color:#fff;display:block
+  }
+  .mat-table td.td-bez::before{content:none}
+
+  .mat-table td.td-menge{grid-area:menge}
+  .mat-table td.td-einh{grid-area:einh}
+  .mat-table td.td-art{grid-area:art}
+  .mat-table td.td-notiz{grid-area:notiz;flex-direction:column;align-items:stretch;gap:6px;border-bottom:none}
+  .mat-table td.td-notiz::before{content:'Notiz'}
+}