From 9276d2d0cd0ca9a94ec3d15a5bba7be2a312491b Mon Sep 17 00:00:00 2001
From: Andrew Beal <andrew.business@tuta.com>
Date: Fri, 30 Jan 2026 10:00:16 +0000
Subject: [PATCH] fix: improve mobile layout spacing and modal margins
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add horizontal margin to conversation divider in TopBar
- Adjust grid row sizing in conversation history modal
- Remove margin from modals on mobile screens (≤600px)
- Reduce bottom margin for diff mobile controls
- Remove redundant background styling from diff button container
- Fix diff view height calculation on mobile to avoid control overlap
---
 Components/TopBar.svelte                     |  1 +
 Modals/ConversationHistoryModalSvelte.svelte |  8 +++++++-
 Modals/HelpModalSvelte.svelte                |  6 ++++++
 Styles/diff2html_styles.css                  | 11 ++++++++---
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/Components/TopBar.svelte b/Components/TopBar.svelte
index 1982041..d9377cf 100644
--- a/Components/TopBar.svelte
+++ b/Components/TopBar.svelte
@@ -214,6 +214,7 @@
   #conversation-divider-2 {
     grid-row: 1;
     grid-column: 8;
+    margin: 0 5px;
   }
 
   #conversation-title {
diff --git a/Modals/ConversationHistoryModalSvelte.svelte b/Modals/ConversationHistoryModalSvelte.svelte
index 8a569c1..9058ffa 100644
--- a/Modals/ConversationHistoryModalSvelte.svelte
+++ b/Modals/ConversationHistoryModalSvelte.svelte
@@ -111,7 +111,7 @@
 <style>
   .conversation-history-modal-container {
     display: grid;
-    grid-template-rows: auto var(--size-4-1) 1fr var(--size-4-2);
+    grid-template-rows: auto var(--size-4-3) 1fr var(--size-4-1);
     grid-template-columns: var(--size-4-2) 1fr var(--size-4-2);
     max-height: 60vh;
     margin: 10px;
@@ -260,4 +260,10 @@
   .conversation-search-input::placeholder {
     color: var(--text-muted);
   }
+
+  @media (max-width: 600px) {
+		.conversation-history-modal-container {
+			margin: 0px;
+		}
+	}
 </style>
\ No newline at end of file
diff --git a/Modals/HelpModalSvelte.svelte b/Modals/HelpModalSvelte.svelte
index 87d5178..7e68780 100644
--- a/Modals/HelpModalSvelte.svelte
+++ b/Modals/HelpModalSvelte.svelte
@@ -388,6 +388,12 @@
 		outline: none;
 	}
 
+	@media (max-width: 600px) {
+		.help-modal-container {
+			margin: 0px;
+		}
+	}
+
 	:global(.is-mobile) #help-modal-version-string-mobile {
 		display: block;
 		grid-row: 5;
diff --git a/Styles/diff2html_styles.css b/Styles/diff2html_styles.css
index c90ad66..297aef3 100644
--- a/Styles/diff2html_styles.css
+++ b/Styles/diff2html_styles.css
@@ -243,7 +243,7 @@
 /* Avoid the floating obsidian controls */
 @media (max-width: 600px) {
     .diff-mobile-controls {
-        margin-bottom: 95px;
+        margin-bottom: 85px;
     }
 }
 
@@ -256,8 +256,6 @@
     left: 0;
     right: 0;
     padding: var(--size-4-3);
-    background-color: var(--background-primary);
-    border-top: 1px solid var(--background-modifier-border);
     z-index: 10;
 }
 
@@ -298,4 +296,11 @@
 /* Adjust diff height on mobile to account for buttons */
 .diff-view-mobile .d2h-file-diff {
     max-height: calc(100cqh - 37px - 40px);
+}
+
+/* Avoid the floating obsidian controls */
+@media (max-width: 600px) {
+    .diff-view-mobile .d2h-file-diff {
+        max-height: calc(100cqh - 37px - 120px);
+    }
 }
\ No newline at end of file