From f5f1b76bfb940a00ce006aab88af9f89b7d49491 Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Fri, 13 Mar 2026 21:57:43 +0100
Subject: [PATCH] Enhance database export functionality and update CSS styles

---
 src/App.tsx   |  9 +++++++--
 src/index.css | 29 ++++++++++++++++++++++++++++-
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 0957ad4..bae0732 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1443,11 +1443,16 @@ export default function App() {
 
   const handleExportDatabase = useCallback(async () => {
     setDbExportStatus(null);
-    const destinationPath = await save({
+    const selectedPath = await save({
       defaultPath: buildDatabaseExportFilename(),
       filters: [{ name: "SQLite Database", extensions: ["db", "sqlite"] }]
     });
-    if (!destinationPath) return;
+    if (!selectedPath) return;
+
+    const destinationPath =
+      selectedPath.endsWith(".db") || selectedPath.endsWith(".sqlite")
+        ? selectedPath
+        : `${selectedPath}.db`;
 
     setDbExporting(true);
     let snapshotPath: string | null = null;
diff --git a/src/index.css b/src/index.css
index a9756e8..02754cf 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1061,6 +1061,8 @@ body:not([data-theme="light"]) .markdown-preview {
   inset: 0;
   display: grid;
   place-items: center;
+  padding: 16px;
+  overflow: auto;
   z-index: 30;
 }
 
@@ -1073,7 +1075,8 @@ body:not([data-theme="light"]) .markdown-preview {
 .settings-panel {
   position: relative;
   z-index: 1;
-  width: min(420px, 92vw);
+  width: min(420px, calc(100vw - 32px));
+  max-height: calc(100vh - 32px);
   padding: 20px;
   border-radius: 16px;
   background: var(--bg-elevated);
@@ -1082,6 +1085,7 @@ body:not([data-theme="light"]) .markdown-preview {
   display: flex;
   flex-direction: column;
   gap: 16px;
+  overflow: hidden;
 }
 
 .settings-panel__header {
@@ -1094,6 +1098,16 @@ body:not([data-theme="light"]) .markdown-preview {
   font-size: 1.1rem;
 }
 
+.settings-panel__body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 4px;
+  margin-right: -4px;
+}
+
 .settings-panel__section {
   display: flex;
   flex-direction: column;
@@ -1160,6 +1174,19 @@ body:not([data-theme="light"]) .markdown-preview {
   color: var(--muted);
 }
 
+.settings-panel__status {
+  font-size: 0.8rem;
+  word-break: break-word;
+}
+
+.settings-panel__status--success {
+  color: var(--ink);
+}
+
+.settings-panel__status--error {
+  color: #d36b6b;
+}
+
 body[data-theme="light"] .editor__textarea-wrap:focus-within {
   border-color: var(--accent-strong);
 }