From c6baace721979d4b0286feae50bf2ce87b2bc323 Mon Sep 17 00:00:00 2001
From: Grzegorz Kucmierz <gkucmierz@gmail.com>
Date: Thu, 26 Feb 2026 23:32:36 +0000
Subject: [PATCH] fix(ui): prevent text selection on buttons

---
 src/App.vue               | 19 +++++++++++++++----
 src/components/Footer.vue | 15 +++++++++++++--
 src/components/Header.vue |  3 ++-
 src/style.css             | 25 +++++++++++++++++++++----
 4 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c155b0f..251baa8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -59,16 +59,27 @@ onUnmounted(() => {
   flex: 1;
   width: 100%;
   position: relative;
-  overflow: hidden; /* Ensure body doesn't scroll */
 }
 
 .main-content {
   flex: 1;
   padding: 2rem;
   width: 100%;
-  max-width: 100%; /* Ensure it doesn't overflow */
-  overflow-y: auto; /* Allow content to scroll independently */
-  height: 100%; /* Take full height of app-body */
+  max-width: 100%;
+  /* Space for fixed footer on mobile + extra margin (generous to ensure gap) */
+  padding-bottom: calc(100px + env(safe-area-inset-bottom));
+}
+
+@media (min-width: 768px) {
+  .app-body {
+    overflow: hidden;
+  }
+
+  .main-content {
+    overflow-y: auto;
+    height: 100%;
+    padding-bottom: 2rem;
+  }
 }
 
 .sidebar-overlay {
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 50d1a4a..9e96211 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -23,9 +23,20 @@ const version = __APP_VERSION__;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-top: auto; /* Push to bottom in flex container */
   z-index: 10;
-  height: 30px;
+  /* Remove fixed height to allow content to dictate size */
+  /* height: 30px; */
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
+}
+
+@media (min-width: 768px) {
+  .app-footer {
+    position: static;
+    margin-top: auto;
+  }
 }
 
 .footer-content {
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 5257dd3..76b7cc7 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -61,7 +61,8 @@ onMounted(() => {
   color: var(--text-color);
   padding: 1rem;
   /* box-shadow handled by glass-panel class */
-  position: relative;
+  position: sticky;
+  top: 0;
   z-index: 100;
   border-left: none;
   border-right: none;
diff --git a/src/style.css b/src/style.css
index b91ef4e..2bba99e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -84,16 +84,27 @@ body {
   margin: 0;
   display: flex;
   min-width: 320px;
-  height: 100vh;
-  overflow: hidden; /* Prevent body scroll */
+  min-height: 100vh;
+  overflow-x: hidden;
 }
 
 #app {
   width: 100%;
-  height: 100vh;
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
-  overflow: hidden; /* Prevent app scroll */
+}
+
+@media (min-width: 768px) {
+  body {
+    height: 100vh;
+    overflow: hidden;
+  }
+
+  #app {
+    height: 100vh;
+    overflow: hidden;
+  }
 }
 
 /* Common UI Element Styles */
@@ -122,6 +133,12 @@ body {
   outline: none; /* Remove focus outline */
 }
 
+/* Global button styles */
+button {
+  user-select: none;
+  -webkit-user-select: none;
+}
+
 /* Remove focus outline for all buttons */
 button:focus {
   outline: none;