fix(frontend): UX improvements (#2126)

Motivation
----------
Here are some improvements, some of them highlighted during the
bi-weekly presentation.

How to test
-----------
1. Visit http://localhost:3000/payment
2. E.g. if the amount is invalid, the tiles won't jump to another
   location in the browser
3. Better naming "Verwendungszweck"
4. Nested routing, button "Cockpit" stays active

frontend/src/components/cockpit/cockpit-layout/CockpitLayout.vue

@@ -19,7 +19,7 @@
 
 @media #{map.get($display-breakpoints, 'md-and-up')} {
   .cockpit {
-    grid-template-columns: 380px 380px;
+    grid-template-columns: 400px 400px;
     max-width: 1200px;
   }
 }

frontend/src/components/cockpit/payment-link/PaymentLink.vue

@@ -3,7 +3,7 @@
     <v-card-text>
       {{ $t('paymentLink.subtitle') }}
     </v-card-text>
-    <v-btn href="/payment" color="primary" block border>
+    <v-btn href="/cockpit/payment" color="primary" block border>
       {{ $t('paymentLink.callToAction') }}
     </v-btn>
   </v-card>

frontend/src/components/sepa-iban/SepaIban.vue

@@ -15,20 +15,25 @@
         </p>
       </template>
     </CockpitCard>
-    <CockpitCard v-if="qr">
+    <CockpitCard>
       <template #header>
         <h2>
           {{ $t('sepaIban.qr.title') }}
         </h2>
       </template>
-      <template #default>
+      <template v-if="qr" #default>
         <p class="pb-4">
           {{ $t('sepaIban.qr.explanation') }}
         </p>
         <div class="d-flex justify-center">
           <VueQrcode :value="qr" :options="{ width: 140 }"></VueQrcode>
         </div>
       </template>
+      <template v-else #default>
+        <p>
+          {{ $t('sepaIban.qr.invalid') }}
+        </p>
+      </template>
     </CockpitCard>
     <CockpitCard>
       <template #header>

frontend/src/locales/de.json

@@ -127,7 +127,7 @@
       "amount": "Betrag in Euro",
       "BIC": "BIC",
       "IBAN": "IBAN",
-      "reference": "Referenz",
+      "reference": "Verwendungszweck",
       "title": "Kontodaten"
     },
     "explanation": {
@@ -137,6 +137,7 @@
     },
     "qr": {
       "explanation": "Alternativ kannst du auch diesen QR Code mit deiner Banking-App scannen.",
+      "invalid": "Bitte gib einen gültigen Betrag ein, um einen QR-Code anzuzeigen.",
       "title": "QR Code scannen"
     }
   },

frontend/src/locales/en.json

@@ -127,7 +127,7 @@
       "amount": "Amount in Euro",
       "BIC": "BIC",
       "IBAN": "IBAN",
-      "reference": "Reference",
+      "reference": "Purpose",
       "title": "Account details"
     },
     "explanation": {
@@ -137,6 +137,7 @@
     },
     "qr": {
       "explanation": "Alternatively, you can also scan this QR code with your banking app.",
+      "invalid": "Please enter a valid amount to display a QR code.",
       "title": "Scan QR Code"
     }
   },

frontend/src/pages/cockpit/__snapshots__/Page.test.ts.snap

@@ -1533,7 +1533,7 @@ exports[`Cockpit Page > without apollo error > renders 1`] = `
             <a
               class="v-btn v-btn--block v-theme--light v-btn--border bg-primary v-btn--density-default v-btn--size-default v-btn--variant-elevated"
               data-v-f97d716a=""
-              href="/payment"
+              href="/cockpit/payment"
             >
               
               <span