Do some Initial Refactoring of the Code

src/css/About.module.scss

@@ -0,0 +1,84 @@
+@use "mobile.module.scss";
+@use "variables.icss";
+
+$icon-size: 40px;
+$title-font-size: 40px;
+$build-version-font-size: 12px;
+$link-color: #56b0ff;
+
+.about {
+    max-width: 700px;
+
+    @include mobile.mobile {
+        max-width: 100%;
+    }
+}
+
+.aboutInnerContainer {
+    background-color: variables.$light-row-color;
+    padding: variables.$ui-large-margin;
+    border: 1px solid variables.$border-color;
+    width: fit-content;
+
+    h2 {
+        margin-bottom: variables.$ui-large-margin;
+    }
+
+    a {
+        color: $link-color;
+    }
+
+    @include mobile.mobile {
+        box-sizing: border-box;
+    }
+}
+
+.livesplitTitle {
+    display: flex;
+    align-items: center;
+    gap: variables.$ui-margin;
+}
+
+.livesplitIcon {
+    height: $icon-size;
+}
+
+.titleText {
+    font-weight: bold;
+    font-size: $title-font-size;
+}
+
+.buildVersion {
+    font-size: $build-version-font-size;
+}
+
+.changelog {
+    margin-left: variables.$ui-large-margin;
+
+    >div {
+        margin: variables.$ui-large-margin 0 variables.$ui-large-margin variables.$ui-large-margin;
+    }
+}
+
+.contributors {
+    margin: 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 14px;
+    justify-content: space-evenly;
+    align-items: end;
+    font-size: 14px;
+
+    a {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        gap: 4px;
+
+        img {
+            width: variables.$contributor-avatar-size;
+            height: variables.$contributor-avatar-size;
+            border-radius: 50%;
+        }
+    }
+}

src/css/Dialog.scss → src/css/Dialog.module.scss

@@ -1,6 +1,6 @@
 @use "variables.icss";
 
-.is-mobile + dialog > .dialog {
+:global(.is-mobile) + dialog > .dialog {
     min-width: auto;
 }
 
@@ -20,13 +20,19 @@ dialog {
         border: 2px solid rgba(255, 255, 255, 0.25);
         border-radius: 10px;
         min-width: 225px;
+        display: flex;
+        flex-direction: column;
+        gap: variables.$ui-large-margin;
 
         max-width: 400px;
         padding: variables.$ui-large-margin;
 
         h1 {
-            font-size: 20px;
-            margin: 5px 0;
+            font-size: larger;
+        }
+
+        >* {
+            margin: 0;
         }
 
         .buttons {
@@ -49,7 +55,6 @@ dialog {
         }
 
         input {
-            width: 100%;
             border: none;
             border-bottom: 1px solid rgba(255, 255, 255, 0.25);
             background: transparent;

src/css/DragUpload.scss → src/css/DragUpload.module.scss

@@ -1,14 +1,14 @@
-@use "mobile";
+@use "mobile.module.scss";
 @use "variables.icss";
 
-#upload-drop-zone {
+.uploadDropZone {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
 
-    #upload-drop-zone-overlay {
+    .overlay {
         position: absolute;
         width: calc(100% + 2 * #{variables.$main-content-margin});
         height: calc(100% + 2 * #{variables.$main-content-margin});
@@ -27,7 +27,7 @@
             margin: 0;
         }
 
-        .overlay-text {
+        .overlayText {
             font-size: 50px;
             text-align: center;
         }

src/css/HotkeyButton.scss → src/css/HotkeyButton.module.scss

@@ -1,23 +1,32 @@
 @use "variables.icss";
 
-.hotkey-box {
+.hotkeyBox {
     button {
-        margin: 0;
         font-size: 16px;
         min-height: 22px;
         padding-top: 0;
         padding-bottom: 0;
     }
 
-    .hotkey-button.focused {
-        color: red;
-    }
-
-    .trash {
-        cursor: pointer;
-    }
-
     display: grid;
     grid-template-columns: 1fr 20px;
     column-gap: variables.$ui-margin;
+    align-items: center;
+}
+
+.focused {
+    color: red;
+}
+
+.trash {
+    cursor: pointer;
+}
+
+.overlay {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+    z-index: 5;
 }

src/css/Layout.module.scss

@@ -0,0 +1,40 @@
+@use "Font";
+
+.resizableLayout {
+    position: absolute;
+    top: 0;
+    width: inherit;
+    height: inherit;
+
+    :global(.react-resizable) {
+        width: 0 !important;
+        height: 0 !important;
+    }
+}
+
+.handleEast {
+    cursor: e-resize;
+    right: -10px;
+    bottom: 10px;
+    top: 0;
+    position: absolute;
+    width: 20px;
+}
+
+.handleSouth {
+    cursor: s-resize;
+    bottom: -10px;
+    left: 0;
+    right: 10px;
+    position: absolute;
+    height: 20px;
+}
+
+.handleSouthEast {
+    cursor: se-resize;
+    bottom: -10px;
+    right: -10px;
+    position: absolute;
+    width: 20px;
+    height: 20px;
+}