Attempt to improve public view layout

dashboard/src/views/PasswordResetView.vue

@@ -101,12 +101,11 @@ onMounted(async () => {
 </script>
 
 <template>
-  <PublicPageLayout :footerHtml="footer">
+  <PublicPageLayout :footer-html="footer" :cloudron-name="cloudronName">
     <div v-if="ready">
 
       <div v-if="mode === MODE.RESET_PASSWORD">
-        <small>{{ $t('passwordReset.title') }}</small>
-        <h1>{{ cloudronName }}</h1>
+        <h2>{{ $t('passwordReset.title') }}</h2>
 
         <form name="passwordResetForm" @submit.prevent="onPasswordReset()">
           <input type="submit" style="display: none;"/>
@@ -130,9 +129,7 @@ onMounted(async () => {
       </div>
 
       <div v-if="mode === MODE.NEW_PASSWORD">
-        <small>{{ $t('passwordReset.newPassword.title') }}</small>
-        <h1>{{ cloudronName }}</h1>
-        <br/>
+        <h2>{{ $t('passwordReset.newPassword.title') }}</h2>
 
         <p class="has-error" v-if="error.generic">{{ error.generic }}</p>
 
@@ -158,34 +155,37 @@ onMounted(async () => {
 
           <div class="actions">
             <Button @click="onNewPassword()" :disabled="busy || !newPassword || newPassword !== newPasswordRepeat" :loading="busy">{{ $t('passwordReset.passwordChanged.submitAction') }}</Button>
-            <a class="login" href="/">{{ $t('passwordReset.backToLoginAction') }}</a>
+            <a href="/">{{ $t('passwordReset.backToLoginAction') }}</a>
           </div>
         </form>
       </div>
 
       <div v-if="mode === MODE.NEW_PASSWORD_DONE">
-        <small>{{ $t('passwordReset.success.title') }}</small>
-        <h1>{{ cloudronName }}</h1>
-        <br/>
+        <h2>{{ $t('passwordReset.success.title') }}</h2>
         <Button href="/">{{ $t('passwordReset.success.openDashboardAction') }}</Button>
       </div>
     </div>
   </PublicPageLayout>
 </template>
 
-
 <style scoped>
 
 .actions {
-  margin-top: 1.5em;
+  margin-top: 12px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }
 
-.actions .login {
-  margin-top: 1em;
+.actions a {
+  margin-top: 12px;
   font-size: 0.9em;
 }
 
+@media (max-width: 576px) {
+  .actions {
+    align-items: unset;
+  }
+}
+
 </style>