fix: AnimatedFileEdit-Layout — Zeilen brechen jetzt um statt eine endlose Zeile [appimage]
All checks were successful
Build AppImage / build (push) Successful in 7m47s

- AnimatedFileEdit: <pre> -> <div> + display:block fuer .line
- white-space: pre-wrap damit lange Zeilen umbrechen statt querzuscrollen
- min-height auf .line damit leere Zeilen sichtbar bleiben
- presentation: align-items stretch + file-edit auf volle Breite (max 1400px)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Eddy 2026-04-27 22:37:56 +02:00
parent 71ab5ec830
commit fc71e6c634
2 changed files with 22 additions and 13 deletions

View file

@ -165,10 +165,7 @@
<span class="path">{filePath}</span>
<span class="lang-tag">{language}</span>
</div>
<pre class="code"><code>{#each ops as op, i (i)}{#if op.kind === 'keep'}<span class="line keep">{op.text}
</span>{:else if op.kind === 'del'}<span class="line del">{op.text}
</span>{:else if op.kind === 'add'}<span class="line add" class:typing={i === currentAddIdx} class:swept={phase === 'sweep' || phase === 'done'}>{visibleAddText(i, op.text)}{#if i === currentAddIdx}<span class="caret"></span>{/if}
</span>{/if}{/each}</code></pre>
<div class="code"><code>{#each ops as op, i (i)}{#if op.kind === 'keep'}<span class="line keep">{op.text || ' '}</span>{:else if op.kind === 'del'}<span class="line del">{op.text || ' '}</span>{:else if op.kind === 'add'}<span class="line add" class:typing={i === currentAddIdx} class:swept={phase === 'sweep' || phase === 'done'}>{visibleAddText(i, op.text) || ' '}{#if i === currentAddIdx}<span class="caret"></span>{/if}</span>{/if}{/each}</code></div>
</div>
<style>
@ -230,21 +227,27 @@
.code {
margin: 0;
padding: 14px 16px;
padding: 14px 0;
font-family: 'JetBrains Mono', 'Cascadia Code', monospace;
font-size: 13.5px;
line-height: 1.55;
color: #e2e8f0;
max-height: 60vh;
max-height: 70vh;
overflow-y: auto;
white-space: pre;
overflow-x: hidden;
}
.code code {
background: transparent;
color: inherit;
display: block;
}
.code code { background: transparent; color: inherit; }
.line {
display: inline-block;
width: 100%;
padding: 0 4px;
display: block;
padding: 0 16px;
white-space: pre-wrap;
word-break: break-word;
min-height: 1.55em;
}
.line.keep { color: #94a3b8; }

View file

@ -186,10 +186,16 @@
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-items: stretch;
justify-content: flex-start;
gap: 1.5rem;
}
.content :global(h1) { text-align: center; }
.content :global(.file-edit) {
align-self: center;
max-width: 1400px;
width: 100%;
}
h1 {
font-size: 2rem;