fix(ui): prevent text selection on buttons

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 */
+  max-width: 100%;
-  overflow-y: auto; /* Allow content to scroll independently */
+  /* Space for fixed footer on mobile + extra margin (generous to ensure gap) */
-  height: 100%; /* Take full height of app-body */
+  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 {

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 {

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;

src/style.css

@@ -84,16 +84,27 @@ body {
   margin: 0;
   display: flex;
   min-width: 320px;
-  height: 100vh;
+  min-height: 100vh;
-  overflow: hidden; /* Prevent body scroll */
+  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;