Improved responsive design again

front/src/components/Button.vue

@@ -13,6 +13,8 @@
 <style scoped>
 
 .button {
+  height: 100%;
+  width: 100%;
   color: var(--primary-color);
   text-align: center;
   align-content: center;
@@ -20,7 +22,6 @@
   border-radius: var(--radius);
   background-color: var(--secondary-color);
   word-break: break-word;
-  min-height: 7vh;
 }
 
 .button:hover

front/src/components/InputField.vue

@@ -3,11 +3,21 @@
 </script>
 
 <template>
-  <div class="input-field">
-    <input/>
-  </div>
+    <input class="input-field" />
 </template>
 
 <style scoped>
 
+input
+{
+  line-height: 100%;
+  text-align: center;
+  border-radius: var(--radius);
+}
+
+input:focus{
+  transform: scale(1.05);
+
+}
+
 </style>

front/src/components/NavLink.vue

@@ -10,9 +10,11 @@ const props = defineProps<{
 </script>
 
 <template>
-  <router-link :to=path>
-    <Button :description="description"/>
-  </router-link>
+  <div class="nav-link">
+    <router-link :to=path >
+      <Button :description="description"/>
+    </router-link>
+  </div>
 </template>
 
 <style scoped>