Poprawki widoków

src/App.scss

@@ -36,7 +36,7 @@
   font-size: 1rem;
 
   @include smallScreen() {
-    font-size: calc(0.45rem + 1vw);
+    font-size: calc(0.3rem + 2vw);
   }
 }
 

src/components/StationsView/StationFilterCard.vue

@@ -277,17 +277,13 @@ export default defineComponent({
 
   &-enter-from,
   &-leave-to {
-    transform: translate(-100%, -50%);
+    transform: translate(-50%, -50%) scale(0.8);
     opacity: 0;
   }
 }
 
 .filter-card {
-  font-size: 0.95em;
-
-  @include smallScreen() {
-    font-size: 1em;
-  }
+  font-size: 1em;
 }
 .card {
   &_btn {
@@ -295,7 +291,7 @@ export default defineComponent({
       display: flex;
       align-items: center;
 
-      padding: 0.5em;
+      padding: 0.5em 1em;
       border-radius: 1em 1em 0 0;
 
       /* border-radius: 0 0.9em 0.9em 0; */
@@ -304,6 +300,7 @@ export default defineComponent({
 
     img {
       width: 1.5em;
+      margin-right: 0.5em;
     }
   }
 

src/components/StationsView/StationTable.vue

@@ -409,7 +409,7 @@ tr.station {
     @include smallScreen() {
       margin: 0;
       padding: 0.3em 0.5em;
-      font-size: 1.1em;
+      font-size: 1em;
     }
   }
 }
@@ -477,6 +477,9 @@ td.station {
       border-radius: 0.5em;
 
       @include smallScreen() {
+        width: 24px;
+        height: 24px;
+        font-size: 10px;
       }
     }
   }

src/styles/card.scss

@@ -4,10 +4,10 @@
 .card {
   position: fixed;
   top: 50%;
-  left: 0;
+  left: 50%;
   z-index: 100;
 
-  transform: translateY(-50%);
+  transform: translate(-50%, -50%);
 
   overflow-x: hidden;
   background: #202020da;
@@ -15,7 +15,7 @@
 
   box-shadow: 0 0 20px 10px #292929;
 
-  width: 550px;
+  width: 600px;
 
   padding: 0.5em 1em;
 

src/views/StationsView.vue

@@ -179,9 +179,4 @@ export default defineComponent({
   margin-bottom: 0.5em;
 }
 
-@include smallScreen {
-  .options-bar {
-    font-size: 1.1em;
-  }
-}
 </style>