Fix scroll issue on mobile devices - add proper overflow and height constraints

Author: hiteshkrmsft

www/css/tabs.css

@@ -3,11 +3,13 @@
   padding: 70px 16px 24px 16px;
   max-width: 480px;
   min-height: 100vh;
+  height: 100vh;
   margin: 0 auto;
   overflow-y: auto;
   overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
   background: var(--light-bg);
+  position: relative;
 }
 
 .tab.active {

www/css/variables.css

@@ -184,6 +184,13 @@ body.dark-mode .modal-box {
   box-sizing: border-box;
 }
 
+html {
+  height: 100%;
+  overflow: hidden;
+  position: fixed;
+  width: 100%;
+}
+
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   background: var(--light-bg);
@@ -192,6 +199,11 @@ body {
   padding: 0;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  position: fixed;
+  -webkit-overflow-scrolling: touch;
 }
 
 /* Modern Card Utility Class */