webapp: improve styling of hints on home view

* increase the spacing between the icon and the text.
* put the text into its own box so it does not flow around the icon.
* vertically center the icon to account for multiple lines of text.
* vertically center the text to account for a single line of text.

closes #1441.

webapp/src/components/HintView.vue

@@ -1,16 +1,29 @@
 <template>
     <BootstrapAlert :show="hints.radio_problem" variant="danger">
-        <BIconBroadcast class="fs-4" /> {{ $t('hints.RadioProblem') }}
+        <div class="d-flex">
+            <div class="align-content-center"><BIconBroadcast class="fs-4" /></div>
+            <div class="align-content-center ms-3">{{ $t('hints.RadioProblem') }}</div>
+        </div>
     </BootstrapAlert>
 
     <BootstrapAlert :show="hints.time_sync" variant="danger">
-        <BIconClock class="fs-4" /> {{ $t('hints.TimeSync') }}
-        <a @click="gotoTimeSettings" href="#" class="alert-link">{{ $t('hints.TimeSyncLink') }}</a>
+        <div class="d-flex">
+            <div class="align-content-center"><BIconClock class="fs-4" /></div>
+            <div class="align-content-center ms-3">
+                {{ $t('hints.TimeSync') }}
+                <a @click="gotoTimeSettings" href="#" class="alert-link">{{ $t('hints.TimeSyncLink') }}</a>
+            </div>
+        </div>
     </BootstrapAlert>
 
     <BootstrapAlert :show="hints.default_password" variant="danger">
-        <BIconExclamationCircle class="fs-4" /> {{ $t('hints.DefaultPassword') }}
-        <a @click="gotoPasswordSettings" href="#" class="alert-link">{{ $t('hints.DefaultPasswordLink') }}</a>
+        <div class="d-flex">
+            <div class="align-content-center"><BIconExclamationCircle class="fs-4" /></div>
+            <div class="align-content-center ms-3">
+                {{ $t('hints.DefaultPassword') }}
+                <a @click="gotoPasswordSettings" href="#" class="alert-link">{{ $t('hints.DefaultPasswordLink') }}</a>
+            </div>
+        </div>
     </BootstrapAlert>
 </template>