fix(frontend): port the missing popup and notification body styles

The SPA's stylesheet carried over .tum-live-popup-container,
.tum-live-popup and .tum-live-popup h2 but not the four descendant rules
that give the popup body its shape. The keyboard shortcuts dialog reuses
that markup, and all of its column alignment comes from the width on
`strong`, so without them it rendered as a run-on list instead of two
columns.

.notificationBody a was missing for the same reason. Notification bodies
are inserted as raw HTML and routinely contain links, which have no styling
at all once Tailwind's preflight has reset them.

Copied verbatim from web/assets/css, per the note at the top of the file:
the two frontends have to render a shared component identically while pages
move across one at a time.

Author: joschahenningsen

frontend/src/styles/main.css

@@ -164,6 +164,27 @@
     @apply mb-[15px] flex items-center justify-between text-[1.5em] font-bold;
   }
 
+  /*
+   * The popup's body is a two-column list: a label of fixed width, then its value.
+   * Without these the keyboard shortcuts render as a run-on bulleted list, because
+   * the column alignment comes entirely from the width on `strong`.
+   */
+  .tum-live-popup ul {
+    @apply list-none border-t border-t-gray-300 p-0;
+  }
+
+  .tum-live-popup li {
+    @apply border-b border-b-gray-300 py-2.5;
+  }
+
+  .tum-live-popup strong {
+    @apply mr-5 inline-block w-[380px] font-bold;
+  }
+
+  .tum-live-popup b {
+    @apply font-bold;
+  }
+
   .tum-live-settings-grid {
     @apply grid gap-y-5 content-start lg:w-3/6 md:w-4/5 w-full p-6 text-3;
   }
@@ -179,4 +200,13 @@
   .tum-live-footer a {
     @apply text-sm font-light text-5 md:py-0 py-1;
   }
+
+  /*
+   * Notification bodies are rendered as raw HTML from the database and routinely
+   * contain links, which have no styling of their own once Tailwind's preflight has
+   * reset them. From web/assets/css/main.css.
+   */
+  .notificationBody a {
+    @apply underline;
+  }
 }