pragotron: responsywne aspect ratio

src/App.vue

@@ -52,6 +52,7 @@ export default defineComponent({
   flex-direction: column;
 
   min-height: 100vh;
+  overflow-x: hidden;
 }
 
 nav {

src/views/PragotronView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pragotron">
+  <div class="pragotron" ref="pragotron">
     <div class="pragotron_content">
       <div class="filters">
         <div>
@@ -170,6 +170,16 @@ export default defineComponent({
   async created() {
     await this.fetchSceneryInfo();
     this.selectDefaultCheckpoint();
+
+    window.addEventListener('resize', (e) => {
+      const elRef = this.$refs['pragotron'] as HTMLElement;
+      if (!elRef) return;
+
+      const scale = Math.min(window.innerWidth / elRef.clientWidth, window.innerHeight / elRef.clientHeight);
+      if (scale > 1) return;
+
+      elRef.style.transform = `scale(${scale})`;
+    });
   },
 
   activated() {
@@ -420,6 +430,10 @@ export default defineComponent({
 
 /* ************** */
 
+.pragotron {
+  padding: 1em;
+}
+
 .filters {
   display: flex;
   justify-content: space-between;