diff --git a/src/frontend/src/App.scss b/src/frontend/src/App.scss
index be1a167f1..ea3800ce3 100644
--- a/src/frontend/src/App.scss
+++ b/src/frontend/src/App.scss
@@ -3,6 +3,11 @@
 @import "styles/bootstrap-customizations";
 @import "styles/typography";
 
+// Global styling
+* {
+  touch-action: pan-x pan-y;
+}
+
 // Prevent refresh on swipe-down
 html,
 body {
diff --git a/src/frontend/src/Components/routing/RouteDetails.js b/src/frontend/src/Components/routing/RouteDetails.js
index ecfd1781e..d44872183 100644
--- a/src/frontend/src/Components/routing/RouteDetails.js
+++ b/src/frontend/src/Components/routing/RouteDetails.js
@@ -505,7 +505,7 @@ export default function RouteDetails(props) {
   // Main components
   return route && (
     <React.Fragment>
-      <Modal show={showNotificationForm} onHide={() => setShowNotificationForm(false)} animation={false} className={'modal--notifications-settings' + (showSpecificTimeDate ? ' long' : '')}>
+      <Modal show={showNotificationForm} onHide={() => setShowNotificationForm(false)} animation={false} className={'modal--notifications-settings'}>
         <Modal.Header closeButton>
           <Modal.Title>
             <div className="modal-title-icon">
diff --git a/src/frontend/src/Components/routing/RouteDetails.scss b/src/frontend/src/Components/routing/RouteDetails.scss
index e16cd09a9..8ae62c7cc 100644
--- a/src/frontend/src/Components/routing/RouteDetails.scss
+++ b/src/frontend/src/Components/routing/RouteDetails.scss
@@ -308,28 +308,6 @@
   }
 }
 
-.modal-dialog {
-  .route-nickname {
-    display: flex;
-    align-items: center;
-
-    p {
-      margin-bottom: 0;
-    }
-
-    svg {
-      margin-left: 4px;
-    }
-
-    .route-nickname-tooltip {
-      border: 0;
-      background: none;
-      padding: 0;
-    }
-  }
-}
-
-
 .modal--notifications-settings {
   .invalid-feedback {
     display: flex;
@@ -337,28 +315,35 @@
     flex-direction: column;
   }
 
-  &.long {
-    .modal-dialog {
-      @media (min-width: 576px) {
-        margin-top: 0;
+  .modal-dialog {
+    .route-nickname {
+      display: flex;
+      align-items: center;
+  
+      p {
+        margin-bottom: 0;
+      }
+  
+      svg {
+        margin-left: 4px;
+      }
+  
+      .route-nickname-tooltip {
+        border: 0;
+        background: none;
+        padding: 0;
       }
     }
-  }
-
-  .modal-dialog {
-    margin: 0;
-    padding: 60px 0;
-    height: 100vh;
 
     @media (min-width: 576px) {
       max-width: 650px;
-      margin-top: 15vh;
       margin-left: auto;
       margin-right: auto;
     }
-
+    
     .modal-content {
       height: fit-content;
+      max-height: calc(100vh - 7.75rem);
 
       @media (max-width: 575px) {
         height: 100%;
diff --git a/src/frontend/src/styles/bootstrap-customizations.scss b/src/frontend/src/styles/bootstrap-customizations.scss
index 892ee8ba3..98060e415 100644
--- a/src/frontend/src/styles/bootstrap-customizations.scss
+++ b/src/frontend/src/styles/bootstrap-customizations.scss
@@ -156,10 +156,19 @@ button:focus:not(:focus-visible) {
 
 // Modal
 .modal-dialog {
-  margin-top: 25vh;
+  margin: 4rem auto 2rem;
+  max-height: calc(100vh - 6rem);
+
+  @media (min-width: 576px) {
+    margin: 6rem auto 1.75rem;
+    max-height: calc(100vh - 7.75rem);
+  }
 
   .modal-content {
     border-radius: 8px;
+    max-height: 100%;
+    display: flex;
+    flex-direction: column;
 
     .modal-header {
       background-color: white;
@@ -198,6 +207,8 @@ button:focus:not(:focus-visible) {
 
     .modal-body {
       padding: 1rem;
+      flex: 1 1 auto;
+      overflow-y: auto;
     }
 
     .modal-buttons {