From 15fc41b35e178dbedfd591728c26c107b5963add Mon Sep 17 00:00:00 2001
From: Andrew Beal <andrew.business@tuta.com>
Date: Thu, 29 Jan 2026 14:22:44 +0000
Subject: [PATCH] Standardize border-radius CSS vars and improve modal spacing
 (post obsidian mobile UI change)

Replace legacy radius vars (--modal-radius, --button-radius, --input-radius) with standardized tokens (--radius-l, --radius-m). Add margins to modals and top bar divider for better spacing. Fix mobile diff view bottom margin to avoid Obsidian controls overlap.
---
 Components/ChatInput.svelte                  | 12 ++++++------
 Components/TopBar.svelte                     |  1 +
 Modals/ConversationHistoryModalSvelte.svelte |  1 +
 Modals/HelpModalSvelte.svelte                |  1 +
 Styles/custom_styles.css                     |  1 +
 Styles/diff2html_styles.css                  |  9 ++++++++-
 6 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/Components/ChatInput.svelte b/Components/ChatInput.svelte
index f2d8567..a59ab2e 100644
--- a/Components/ChatInput.svelte
+++ b/Components/ChatInput.svelte
@@ -550,7 +550,7 @@
     display: grid;
     grid-template-rows: auto auto auto auto var(--size-4-3) 1fr var(--size-4-3);
     grid-template-columns: var(--size-4-3) auto var(--size-4-2) 1fr var(--size-4-2) auto var(--size-4-2) auto var(--size-4-2) auto var(--size-4-3);
-    border-radius: var(--modal-radius);
+    border-radius: var(--radius-l);
     background-color: var(--background-primary);
   }
 
@@ -587,7 +587,7 @@
   #user-instruction-button {
     grid-row: 6;
     grid-column: 2;
-    border-radius: var(--button-radius);
+    border-radius: var(--radius-l);
     align-self: end;
     transition-duration: 0.5s;
   }
@@ -605,7 +605,7 @@
     grid-column: 4;
     height: 100%;
     max-height: 30vh;
-    border-radius: var(--input-radius);
+    border-radius: var(--radius-m);
     font-weight: var(--input-font-weight);
     border-width: var(--input-border-width);
     border-style: solid;
@@ -664,7 +664,7 @@
   #edit-mode-button {
     grid-row: 6;
     grid-column: 6;
-    border-radius: var(--button-radius);
+    border-radius: var(--radius-l);
     align-self: end;
     transition-duration: 0.5s;
   }
@@ -680,7 +680,7 @@
   #planning-mode-button {
     grid-row: 6;
     grid-column: 8;
-    border-radius: var(--button-radius);
+    border-radius: var(--radius-l);
     align-self: end;
     transition-duration: 0.5s;
   }
@@ -696,7 +696,7 @@
   #submit-button {
     grid-row: 6;
     grid-column: 10;
-    border-radius: var(--button-radius);
+    border-radius: var(--radius-l);
     padding-left: var(--size-4-5);
     padding-right: var(--size-4-5);
     align-self: end;
diff --git a/Components/TopBar.svelte b/Components/TopBar.svelte
index c673760..1982041 100644
--- a/Components/TopBar.svelte
+++ b/Components/TopBar.svelte
@@ -198,6 +198,7 @@
   #conversation-divider-1 {
     grid-row: 1;
     grid-column: 5;
+    margin: 0 5px;
   }
 
   #settings-button {
diff --git a/Modals/ConversationHistoryModalSvelte.svelte b/Modals/ConversationHistoryModalSvelte.svelte
index 83ecb16..8a569c1 100644
--- a/Modals/ConversationHistoryModalSvelte.svelte
+++ b/Modals/ConversationHistoryModalSvelte.svelte
@@ -114,6 +114,7 @@
     grid-template-rows: auto var(--size-4-1) 1fr var(--size-4-2);
     grid-template-columns: var(--size-4-2) 1fr var(--size-4-2);
     max-height: 60vh;
+    margin: 10px;
   }
 
   .conversation-history-modal-top-bar {
diff --git a/Modals/HelpModalSvelte.svelte b/Modals/HelpModalSvelte.svelte
index fc29dac..87d5178 100644
--- a/Modals/HelpModalSvelte.svelte
+++ b/Modals/HelpModalSvelte.svelte
@@ -216,6 +216,7 @@
 		grid-template-columns: var(--size-4-2) 1fr var(--size-4-2);
 		max-height: 60vh;
 		min-height: 60vh;
+		margin: 10px;
 	}
 
 	.help-modal-top-bar {
diff --git a/Styles/custom_styles.css b/Styles/custom_styles.css
index 1dfc833..94e2560 100644
--- a/Styles/custom_styles.css
+++ b/Styles/custom_styles.css
@@ -132,6 +132,7 @@
   margin: var(--size-4-2) 0px var(--size-4-2) 0px;
   padding: var(--size-4-1) var(--size-4-2) var(--size-4-1) var(--size-4-2);
   color: var(--text-muted);
+  border-radius: var(--radius-m);
 }
 
 .top-bar-button:hover {
diff --git a/Styles/diff2html_styles.css b/Styles/diff2html_styles.css
index 52744c0..c90ad66 100644
--- a/Styles/diff2html_styles.css
+++ b/Styles/diff2html_styles.css
@@ -240,6 +240,13 @@
     display: none; /* Hidden by default (desktop) */
 }
 
+/* Avoid the floating obsidian controls */
+@media (max-width: 600px) {
+    .diff-mobile-controls {
+        margin-bottom: 95px;
+    }
+}
+
 .diff-view-mobile .diff-mobile-controls {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -291,4 +298,4 @@
 /* Adjust diff height on mobile to account for buttons */
 .diff-view-mobile .d2h-file-diff {
     max-height: calc(100cqh - 37px - 40px);
-}
+}
\ No newline at end of file