poprawki responsywności

src/components/Global/AnimatedModal.vue

@@ -45,6 +45,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+
 .body {
   position: fixed;
   top: 0;
@@ -79,5 +81,21 @@ export default defineComponent({
   width: 95%;
   max-width: 800px;
   max-height: 95vh;
+
+  & > :slotted(div) {
+    max-height: 95vh;
+  }
+}
+
+@include smallScreen {
+  .wrapper {
+    top: 0;
+    transform: translate(-50%, 1em);
+    max-height: 90vh;
+
+    & > :slotted(div) {
+      max-height: 90vh;
+    }
+  }
 }
 </style>

src/components/Global/Donation.vue

@@ -141,7 +141,7 @@ export default defineComponent({
   display: grid;
   grid-template-rows: 1fr auto;
   gap: 1em;
-  max-height: 95vh;
+
   font-size: 1.1em;
 
   & > div {
@@ -172,8 +172,12 @@ export default defineComponent({
 }
 
 .modal_actions {
-  display: flex;
+  display: grid;
-  justify-content: flex-end;
+  grid-template-columns: repeat(auto-fit, minmax(13em, 1fr));
   gap: 0.5em;
+
+  form button {
+    width: 100%;
+  }
 }
 </style>

src/components/StationsView/StationTable.vue

@@ -389,18 +389,16 @@ $rowCol: #424242;
   }
 }
 
-section.station_table {
-  overflow: auto;
-  overflow-y: hidden;
-  font-weight: 500;
-}
-
 table {
   white-space: nowrap;
   border-collapse: collapse;
   // min-width: 1350px;
   width: 100%;
 
+  overflow: auto;
+  overflow-y: hidden;
+  font-weight: 500;
+
   @include smallScreen() {
     min-width: auto;
   }