fix(pwa): adjust height of watching indicator & fix i18n label

Author: dvcol

src/components/views/checkin/CheckinComponent.vue

@@ -211,7 +211,6 @@ const onClick = () => {
     align-items: center;
     justify-content: space-between;
     height: 0;
-    padding-bottom: layout.$safe-area-inset-bottom;
     overflow: hidden;
     color: var(--white-70);
     text-wrap: balance;
@@ -303,12 +302,12 @@ const onClick = () => {
     }
 
     &.watching {
-      height: 1.75rem;
+      height: calc(1.75rem + #{layout.$safe-area-inset-bottom});
 
       &:active,
       &:focus-within,
       &:hover {
-        height: 3rem;
+        height: calc(3rem + #{layout.$safe-area-inset-bottom});
         color: var(--white);
 
         .icon {

src/i18n/en/common/button.json

@@ -91,7 +91,7 @@
     "message": "Check-in",
     "description": "Button to check-in."
   },
-  "common__button__Watched": {
+  "common__button__watched": {
     "message": "Watched",
     "description": "Button to mark as watched."
   }

src/styles/base.scss

@@ -1,3 +1,5 @@
+@use '~/styles/reset';
+
 /* color palette from <https://github.com/vuejs/theme> */
 :host {
   /* height */

src/styles/reset.scss

@@ -0,0 +1,17 @@
+/* Avoid ugly unbalanced word wrap */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+}
+
+/* Avoid ugly orphan word wrap */
+p,
+li,
+figcaption {
+  max-width: 80ch;
+  text-wrap: pretty;
+}