Savestate: Replace table with flexbox list to fix mobile rendering issues

index.html

@@ -51,7 +51,7 @@
 </head>
 <body class="dark-theme in-chat-view">
   
-  <div id="live-version-badge" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-secondary); opacity: 0.6; z-index: 99999; pointer-events: none; font-weight: 500; font-family: monospace; letter-spacing: 1px; background: rgba(0,0,0,0.2); padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05);">BUILD 1.1.75</div>
+  <div id="live-version-badge" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-secondary); opacity: 0.6; z-index: 99999; pointer-events: none; font-weight: 500; font-family: monospace; letter-spacing: 1px; background: rgba(0,0,0,0.2); padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05);">BUILD 1.1.76</div>
     
   <!-- SVG Filters for Liquid Glass Refraction -->
   <svg width="0" height="0" style="position: absolute; pointer-events: none;">

src/views/learn/learn-view.js

@@ -221,29 +221,18 @@ export class LearnView {
         <h3 style="margin-bottom: 16px; font-size: 18px;">Alle Karten (${deck.total_count})</h3>
         <div style="background: var(--surface-1); border-radius: 20px; border: 1px solid var(--border); overflow: hidden;">
           ${deck.total_count === 0 ? '<div style="padding: 24px; text-align: center; color: var(--text-secondary);">Noch keine Karten in diesem Stapel.</div>' : `
-          <div style="overflow-x: auto;">
-            <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
-              <thead>
-                <tr style="border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.02);">
-                  <th style="padding: 12px 16px; text-align: left; font-weight: 500; color: var(--text-secondary);">Vorderseite</th>
-                  <th style="padding: 12px 16px; text-align: left; font-weight: 500; color: var(--text-secondary);">Rückseite (Auszug)</th>
-                  <th style="padding: 12px 16px; text-align: right; width: 60px;"></th>
-                </tr>
-              </thead>
-              <tbody>
-                ${db.getCardsForDeck(deckId).map(card => `
-                  <tr style="border-bottom: 1px solid var(--border); transition: background 0.2s;" onmouseover="this.style.background='rgba(255,255,255,0.02)'" onmouseout="this.style.background='transparent'">
-                    <td style="padding: 12px 16px; vertical-align: top;">${card.front}</td>
-                    <td style="padding: 12px 16px; vertical-align: top; color: rgba(255,255,255,0.7);">${(card.back || '').split('\n')[0]}</td>
-                    <td style="padding: 12px 16px; text-align: right; vertical-align: top;">
-                      <button onclick="window.learnView.deleteCard('${card.id}', '${deckId}')" style="background: transparent; border: none; color: #ff4b4b; cursor: pointer; padding: 4px; border-radius: 4px;" title="Löschen">
-                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
-                      </button>
-                    </td>
-                  </tr>
-                `).join('')}
-              </tbody>
-            </table>
+          <div style="display: flex; flex-direction: column;">
+            ${db.getCardsForDeck(deckId).map((card, index) => `
+              <div style="display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: ${index === deck.total_count - 1 ? 'none' : '1px solid var(--border)'}; transition: background 0.2s;" onmouseover="this.style.background='rgba(255,255,255,0.02)'" onmouseout="this.style.background='transparent'">
+                <div style="flex: 1; min-width: 0; padding-right: 12px;">
+                  <div style="font-weight: 500; font-size: 16px; margin-bottom: 4px; color: var(--text-primary); text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">${card.front}</div>
+                  <div style="font-size: 13px; color: var(--text-secondary); text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">${(card.back || '').split('\n')[0]}</div>
+                </div>
+                <button onclick="window.learnView.deleteCard('${card.id}', '${deckId}')" class="icon-btn" style="background: rgba(255,75,75,0.1); color: #ff4b4b; border: none; padding: 8px; border-radius: 8px; flex-shrink: 0;" title="Löschen">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
+                </button>
+              </div>
+            `).join('')}
           </div>
           `}
         </div>