poprawki responsywności

src/components/sections/StockSection.vue

@@ -112,6 +112,7 @@ function chooseSection(sectionId: SectionMode) {
 .section_modes {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
+
   gap: 0.5em;
 
   margin-bottom: 0.5em;
@@ -138,5 +139,11 @@ function chooseSection(sectionId: SectionMode) {
     }
   }
 }
+
+@media screen and (max-width: 650px) {
+  .section_modes {
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  }
+}
 </style>
 

src/components/tabs/WikiListTab.vue

@@ -1,5 +1,10 @@
 <template>
-  <section class="wiki-list">
+  <section class="wiki-list tab">
+    <div class="tab_header">
+      <h2>LISTA DOSTĘPNYCH POJAZDÓW</h2>
+    </div>
+
+    <div class="tab_content">
       <div class="actions-panel">
         <div class="actions-panel_vehicles">
           <button class="btn btn--choice" @click="changeWikiMode('locomotives')">POJ. TRAKCYJNE</button>
@@ -77,6 +82,7 @@
           </tbody>
         </table>
       </div>
+    </div>
   </section>
 </template>
 
@@ -248,6 +254,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import '../../styles/tab.scss';
+
 .actions-panel {
   display: flex;
   justify-content: space-between;
@@ -308,16 +316,28 @@ export default defineComponent({
   td {
     text-align: center;
     padding: 0.25em;
-    height: 100px;
   }
 
   td:first-child {
-    width: 150px;
+    width: 120px;
   }
 
   td img {
     display: block;
-    width: 150px;
+    width: 120px;
+  }
+}
+
+@media screen and (max-width: $breakpointMd) {
+  .wiki-list table {
+    td {
+      width: 100px;
+      height: auto;
+
+      img {
+        width: 6em;
+      }
+    }
   }
 }
 </style>