vincent/gerbeur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v3: dump edit balances its two columns — the dump itself (preview, refresh, thumbnail, URL or replacement file) on the left, its presentation (title, why, categories, visibility) on the right, actions in a full-width footer bar so both columns end level; "Why?" stretches to absorb a taller preview on desktop

Browse Source 
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
khannurien
2026-09-19 21:32:18 +00:00
parent e9ebc3fee6
commit 084ebcb627
2 changed files with 193 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/App.css
View File

@@ -95,8 +95,8 @@
.dump-post-header,
.dump-rich-content,
.form-page-header,
.dump-edit-preview,
.form-page .form,
.dump-edit-panel,
.dump-edit-footer,
.playlist-detail-header,
.comment-node-inner {
box-shadow: var(--panel-ring), var(--card-shadow);
@@ -3032,20 +3032,38 @@ body.has-player .chat-fab {
animation: page-enter 0.2s ease both;
}
/* The edit form spans the page grid and lays out its own panels: the dump
itself (preview, thumbnail, source) beside its presentation (title, why,
categories, visibility), with a full-width action bar underneath so both
columns end on the same line. Only the header and footer are rounded. */
.dump-edit-form {
display: grid;
grid-template-columns: 1fr;
gap: inherit;
}
@media (min-width: 860px) {
.form-page--two-col {
.form-page--two-col,
.dump-edit-form {
grid-template-columns: 1fr 1fr;
}
.form-page--two-col .form-page-header {
.form-page--two-col .form-page-header,
.dump-edit-form,
.dump-edit-footer {
grid-column: 1 / -1;
}
.form-page--two-col .dump-edit-preview {
border-radius: 0 0 0 var(--radius-xl);
/* "Why?" soaks up whatever height the source column adds, so a tall
preview doesn't leave a hole under the details. */
.dump-edit-panel--details .form-field:has(.mention-textarea-wrap) {
flex: 1 1 auto;
}
/* Higher specificity than the generic `.form-page .form` below so the
form's bottom-left stays square where it meets the preview. */
.form-page.form-page--two-col .form {
border-radius: 0 0 var(--radius-xl) 0;
.dump-edit-panel--details .mention-textarea-wrap {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.dump-edit-panel--details .mention-textarea-wrap textarea {
flex: 1 1 auto;
}
}
@@ -3074,13 +3092,31 @@ body.has-player .chat-fab {
word-break: break-word;
}
.dump-edit-preview {
.dump-edit-panel {
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
padding: 1.25rem;
background: var(--color-surface);
}
.dump-edit-preview {
overflow: hidden;
}
.dump-edit-footer {
padding: 0.875rem 1.25rem;
background: var(--color-surface);
border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.dump-edit-footer .form-actions {
padding-top: 0;
border-top: 0;
margin-top: 0;
}
.dump-edit-refresh {
margin-top: 0.75rem;
}
@@ -3097,12 +3133,6 @@ body.has-player .chat-fab {
gap: 0.75rem;
}
.form-page .form {
background: var(--color-surface);
border-radius: 0 0 var(--radius-xl) var(--radius-xl);
padding: 1.25rem;
}
.form-actions {
display: flex;
align-items: center;