diff --git a/app/renderer/editor/EditorApp.module.css b/app/renderer/editor/EditorApp.module.css
index d966fc8..ac830cf 100644
--- a/app/renderer/editor/EditorApp.module.css
+++ b/app/renderer/editor/EditorApp.module.css
@@ -62,8 +62,9 @@
.editorSidebar {
height: 100%;
min-height: 0;
- display: grid;
- grid-template-rows: auto 1fr;
+ display: flex;
+ flex-direction: column;
+ gap: 0;
padding: 12px;
border-right: 1px solid var(--stroke);
background: var(--editor-column-bg);
@@ -105,10 +106,25 @@
.gridTools {
display: grid;
gap: 10px;
+ flex: 0 0 auto;
+}
+
+.gridTools > * {
+ width: 100%;
+ max-width: 100%;
+ display: flex;
+ box-sizing: border-box;
+}
+
+.gridTools button {
+ width: 100%;
+ box-sizing: border-box;
+ flex: 1;
}
.spacer14 {
height: 14px;
+ flex: 0 0 auto;
}
.spacer18 {
@@ -124,17 +140,28 @@
.gamePropsButtons > * {
width: 100%;
min-width: 0;
+ max-width: 100%;
+ display: flex;
+ box-sizing: border-box;
+}
+
+.gamePropsButtons button {
+ width: 100%;
+ box-sizing: border-box;
+ flex: 1;
}
.sidebarScroll {
overflow: auto;
padding-right: 2px;
min-height: 0;
+ flex: 1 1 auto;
align-self: stretch;
}
.sceneListGrid {
display: grid;
+ grid-template-columns: minmax(0, 1fr);
gap: 12px;
align-content: start;
justify-items: stretch;
@@ -192,15 +219,19 @@
.progressModal {
width: min(520px, calc(100vw - 32px));
border-radius: 12px;
- padding: 14px;
+ padding: 16px 16px 20px;
background: rgba(25, 28, 38, 0.92);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
+ display: grid;
+ gap: 12px;
+ justify-items: center;
}
.progressTitle {
font-weight: 700;
- margin-bottom: 10px;
+ width: 100%;
+ text-align: center;
}
.progressBar {
@@ -209,6 +240,7 @@
overflow: hidden;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
+ width: 100%;
}
.progressFill {
@@ -218,11 +250,13 @@
}
.progressMeta {
- margin-top: 10px;
+ margin-top: 0;
display: flex;
justify-content: space-between;
+ gap: 12px;
opacity: 0.9;
font-size: 12px;
+ width: 100%;
}
.inspectorTitle {
@@ -610,6 +644,23 @@
gap: 10px;
}
+.projectPickerForm > * {
+ width: 100%;
+ max-width: 100%;
+ box-sizing: border-box;
+}
+
+.projectPickerForm > *:has(button),
+.projectPickerForm > span {
+ display: flex;
+}
+
+.projectPickerForm button {
+ width: 100%;
+ box-sizing: border-box;
+ flex: 1;
+}
+
.spacer6 {
height: 6px;
}
@@ -918,6 +969,21 @@
background 0.15s ease;
}
+.audioDropEmpty {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ min-height: 96px;
+ text-align: center;
+ padding: 8px 4px;
+}
+
+.audioDropEmpty > * {
+ max-width: 100%;
+}
+
.audioDropDragOver {
border-color: var(--accent);
background: var(--accent-fill-soft);
diff --git a/app/renderer/editor/EditorApp.tsx b/app/renderer/editor/EditorApp.tsx
index b431c5a..01c8f9d 100644
--- a/app/renderer/editor/EditorApp.tsx
+++ b/app/renderer/editor/EditorApp.tsx
@@ -2380,68 +2380,73 @@ function CampaignInspector({
{t('drop.hintAudio')}
) : null}
{mediaAssets.filter((a) => a.type === 'audio').length === 0 ? (
- {t('campaign.noFiles')}
- ) : (
-
- {mediaAssets
- .filter((a) => a.type === 'audio')
- .map((a) => (
-
- ))}
+
+
{t('campaign.noFiles')}
+
+ ) : (
+ <>
+
+ {mediaAssets
+ .filter((a) => a.type === 'audio')
+ .map((a) => (
+
+ ))}
+
+
+ >
)}
-
);
@@ -2653,68 +2658,73 @@ function SceneInspector({
{t('drop.hintAudio')}
) : null}
{mediaAssets.filter((a) => a.type === 'audio').length === 0 ? (
- {t('campaign.noFiles')}
- ) : (
-
- {mediaAssets
- .filter((a) => a.type === 'audio')
- .map((a) => (
-
- ))}
+
+
{t('campaign.noFiles')}
+
+ ) : (
+ <>
+
+ {mediaAssets
+ .filter((a) => a.type === 'audio')
+ .map((a) => (
+
+ ))}
+
+
+ >
)}
-
{t('scene.branching')}
@@ -2754,6 +2764,7 @@ function SceneListCard({
const thumbUrl = useAssetUrl(scene.previewThumbAssetId);
const previewUrl = useAssetUrl(scene.previewAssetId);
const [menu, setMenu] = useState<{ x: number; y: number } | null>(null);
+ const [pendingDelete, setPendingDelete] = useState(false);
useEffect(() => {
if (!menu) return;
@@ -2909,8 +2920,8 @@ function SceneListCard({
role="menuitem"
className={styles.sceneCtxDanger}
onClick={() => {
- onDeleteScene(scene.id);
setMenu(null);
+ setPendingDelete(true);
}}
>
{t('common.delete')}
@@ -2920,6 +2931,49 @@ function SceneListCard({
document.body,
)
: null}
+ {pendingDelete
+ ? createPortal(
+ <>
+