Update mobile layout auto resizing

src/css/main.scss

@@ -77,7 +77,7 @@ button {
   border-radius: 5px;
   font-weight: bold;
   font-family: "fira", sans-serif;
-  height: 40px;
+  height: $button-height;
 }
 
 a {

src/css/variables.scss

@@ -16,6 +16,7 @@ $button-disabled-text-color: #666;
 $button-hover-color: linear-gradient(hsl(0, 0%, 14%) 0%, hsl(0, 0%, 9%) 100%);
 $button-text-color: #eee;
 $button-max-width: 300px;
+$button-height: 40px;
 
 $main-background-color: #171717;
 $sidebar-background-color: #1A1A1A;
@@ -27,3 +28,7 @@ $light-row-color: #121212;
 
 $selected-row-color: linear-gradient(rgb(51, 115, 244) 0%, rgb(21, 53, 116) 100%);
 $selected-row-hover-color: linear-gradient(hsl(220, 90%, 70%) 0%, hsl(220, 69%, 40%) 100%);
+
+:export {
+  buttonHeight: $button-height;
+}

src/ui/LiveSplit.tsx

@@ -3,7 +3,7 @@ import Sidebar from "react-sidebar";
 import {
     HotkeySystem, Layout, LayoutEditor, Run, RunEditor,
     Segment, SharedTimer, Timer, TimerRef, TimerRefMut,
-    HotkeyConfig, LayoutState,
+    HotkeyConfig, LayoutState, LayoutStateJson
 } from "../livesplit-core";
 import { convertFileToArrayBuffer, convertFileToString, exportFile, openFileAsString } from "../util/FileUtil";
 import { Option, assertNull, expect, maybeDisposeAndThen, panic } from "../util/OptionUtil";
@@ -19,10 +19,13 @@ import { toast } from "react-toastify";
 import * as Storage from "../storage";
 import { UrlCache } from "../util/UrlCache";
 import { WebRenderer } from "../livesplit-core/livesplit_core";
+import variables from "../css/variables.scss";
 
 import "react-toastify/dist/ReactToastify.css";
 import "../css/LiveSplit.scss";
 
+const buttonHeight = parseFloat(variables.buttonHeight);
+
 export enum MenuKind {
     Timer,
     Splits,
@@ -530,12 +533,29 @@ export class LiveSplit extends React.Component<Props, State> {
 
     private handleAutomaticResize() {
         if (!this.state.isDesktop) {
+            const layoutDirection = (this.state.layoutState.asJson() as LayoutStateJson).direction;
+            if (layoutDirection !== "Vertical") {
+                return;
+            }
+
             const fullWidth = this.containerRef.current?.clientWidth;
             if (fullWidth && fullWidth !== this.state.layoutWidth) {
                 this.setState({
                     layoutWidth: fullWidth,
                 });
             }
+
+            // Only auto adjust height in Timer view because other views can
+            // have scrolling, so the container height is more than screen height
+            if (this.state.menu.kind === MenuKind.Timer) {
+                const fullHeight = this.containerRef.current?.clientHeight;
+                const newHeight = fullHeight ? fullHeight - 2 * buttonHeight : null;
+                if (newHeight && newHeight !== this.state.layoutHeight) {
+                    this.setState({
+                        layoutHeight: newHeight,
+                    });
+                }
+            }
         }
     }