HOTFIX mobile layout add tournament

HE-Arc · Mar 22, 2024 · f0f2f79 · f0f2f79
1 parent 80ec912
commit f0f2f79
Showing 1 changed file with 44 additions and 0 deletions.
diff --git a/frontend/src/views/AddTournamentView.vue b/frontend/src/views/AddTournamentView.vue
@@ -52,6 +52,8 @@ const addTournament = () => {
 </template>
 
 <style lang="scss" scoped>
+@import "@/assets/styles/breakpoints";
+
 h1,
 form {
     grid-column: 1 / span 12;
@@ -82,4 +84,46 @@ button {
     grid-column: 3 / span 4;
     height: 32px;
 }
+
+@media(max-width: $medium-breakpoint) {
+
+    form {
+        label {
+            grid-column: 1 / span 4;
+        }
+
+        input,
+        textarea,
+        select {
+            grid-column: 5 / span 8;
+            height: 32px;
+        }
+    }
+
+    button {
+        grid-column: 5 / span 8;
+        height: 32px;
+    }
+}
+
+@media(max-width: $small-breakpoint) {
+
+    form {
+        label {
+            grid-column: 1 / span 12;
+        }
+
+        input,
+        textarea,
+        select {
+            grid-column: 1 / span 12;
+            height: 32px;
+        }
+    }
+
+    button {
+        grid-column: 1 / span 12;
+        height: 32px;
+    }
+}
 </style>