Better CSS

static/css/main.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 @import 'fontawesome-all.min.css';
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic|Roboto+Slab:400,700");
 /*
@@ -2486,32 +2485,63 @@ button:disabled,
   justify-content: center;
   align-items: center;
   z-index: 999999;
+  overflow-y: auto;
 }
 
 .modal-content {
   background-color: #fff;
   padding: 20px;
-  border-radius: 5px;
+  border-radius: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-  width: 90%; /* Sæt bredden til 80% af skærmens bredde */
+  width: 90%; /* Use 90% width for small screens */
-  height: 90%;
+  max-width: 600px; /* Prevent it from getting too large */
+  height: auto; /* Automatic height */
+  max-height: 90%; /* Prevent it from overflowing the screen */
   text-align: center;
-  z-index: 50000; /* Content stays above the blurred overlay */
+  z-index: 50000;
-  margin: 10% auto; /* Centrer modalen horisontalt og tilføj vertikal afstand */
+  margin: 0; /* Remove hardcoded margin */
+  overflow-y: auto; /* Scroll if content exceeds max-height */
 }
 
-.open {
+.open, .open_inv {
-  padding: -20px;
+  display: inline-block;
-  margin: -10% auto; /* Centrer modalen horisontalt og tilføj vertikal afstand */
+  padding: 10px 20px;
+  margin: 10px auto;
+  border: none;
+  background-color: #007BFF;
+  color: #fff;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+.open.open, .open_inv.open {
   transform: rotate(15deg);
 }
-
+.open.open_inv, .open_inv.open_inv {
-.open_inv {
-  padding: -20px;
-  margin: -10% auto; /* Centrer modalen horisontalt og tilføj vertikal afstand */
   transform: rotate(-15deg);
 }
 
+@media (max-width: 768px) {
+  .modal-content {
+    width: 95%; /* Use nearly full width for small devices */
+    height: auto;
+    padding: 15px; /* Reduce padding for smaller screens */
+  }
+  .open, .open_inv {
+    font-size: 14px; /* Smaller buttons for smaller screens */
+    padding: 8px 15px;
+  }
+}
+@media (max-width: 480px) {
+  .modal-content {
+    border-radius: 5px; /* Smaller radius for small devices */
+  }
+  .open, .open_inv {
+    font-size: 12px;
+    padding: 6px 12px;
+  }
+}
 /* Wrapper */
 #wrapper {
   display: -moz-flex;

static/sass/components/_modals.scss

@@ -20,33 +20,68 @@ $modal-content-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
   justify-content: center;
   align-items: center;
   z-index: $modal-z-index; // Ensure it stays on top
+  overflow-y: auto; // Enable vertical scrolling on mobile if needed
 }
 
 // Modal content
 .modal-content {
   background-color: $modal-content-bg;
   padding: 20px;
-  border-radius: 5px;
+  border-radius: 10px;
   box-shadow: $modal-content-shadow;
-  width: 90%; /* Sæt bredden til 80% af skærmens bredde */
+  width: 90%; /* Use 90% width for small screens */
-  height: 90%;
+  max-width: 600px; /* Prevent it from getting too large */
-  // max-width: 1200px; /* Tilføj en maks-bredde for store skærme */
+  height: auto; /* Automatic height */
+  max-height: 90%; /* Prevent it from overflowing the screen */
   text-align: center;
-  z-index: $modal-content-z-index; /* Content stays above the blurred overlay */
+  z-index: $modal-content-z-index;
-  margin: 10% auto; /* Centrer modalen horisontalt og tilføj vertikal afstand */
+  margin: 0; /* Remove hardcoded margin */
+  overflow-y: auto; /* Scroll if content exceeds max-height */
 }
 
 // Rotating buttons
-.open {
+.open, .open_inv {
-  padding: -20px;
+  display: inline-block;
-  margin: -10% auto; /* Centrer modalen horisontalt og tilføj vertikal afstand */
+  padding: 10px 20px;
+  margin: 10px auto;
+  border: none;
+  background-color: #007BFF;
+  color: #fff;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: transform 0.2s ease;
 
+  &.open {
     transform: rotate(15deg); // Rotates button 15 degrees clockwise
-}
+  }
-
-.open_inv {
-  padding: -20px;
-  margin: -10% auto; /* Centrer modalen horisontalt og tilføj vertikal afstand */
 
+  &.open_inv {
     transform: rotate(-15deg); // Rotates button 15 degrees counterclockwise
+  }
+}
+
+// Responsive adjustments for smaller screens
+@media (max-width: 768px) {
+  .modal-content {
+    width: 95%; /* Use nearly full width for small devices */
+    height: auto;
+    padding: 15px; /* Reduce padding for smaller screens */
+  }
+
+  .open, .open_inv {
+    font-size: 14px; /* Smaller buttons for smaller screens */
+    padding: 8px 15px;
+  }
+}
+
+@media (max-width: 480px) {
+  .modal-content {
+    border-radius: 5px; /* Smaller radius for small devices */
+  }
+
+  .open, .open_inv {
+    font-size: 12px;
+    padding: 6px 12px;
+  }
 }