Fix compound typography font component issues (#12826)

* Fix compound typography font component issues

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update playwright tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

playwright/e2e/app-loading/feature-detection.spec.ts

@@ -21,9 +21,9 @@ test(`shows error page if browser lacks Intl support`, async ({ page }) => {
     await page.goto("/");
 
     // Lack of Intl support causes the app bundle to fail to load, so we get the iframed
-    // static error page and need to explicitly look in the iframe becuse Playwright doesn't
+    // static error page and need to explicitly look in the iframe because Playwright doesn't
     // recurse into iframes when looking for elements
-    const header = await page.frameLocator("iframe").getByText("Unsupported browser");
+    const header = page.frameLocator("iframe").getByText("Unsupported browser");
     await expect(header).toBeVisible();
 
     await expect(page).toMatchScreenshot("unsupported-browser.png");
@@ -34,8 +34,8 @@ test(`shows error page if browser lacks WebAssembly support`, async ({ page }) =
     await page.goto("/");
 
     // Lack of WebAssembly support doesn't cause the bundle to fail loading, so we get
-    // CompatibilityView, ie. no iframes.
-    const header = await page.getByText("Unsupported browser");
+    // CompatibilityView, i.e. no iframes.
+    const header = page.getByText("Unsupported browser");
     await expect(header).toBeVisible();
 
     await expect(page).toMatchScreenshot("unsupported-browser-CompatibilityView.png");

res/css/_common.pcss

@@ -25,8 +25,6 @@ limitations under the License.
 @import url("maplibre-gl/dist/maplibre-gl.css");
 
 :root {
-    font-size: 10px;
-
     --container-border-width: 8px;
     --container-gap-width: 8px; /* only even numbers should be used because otherwise we get 0.5px margin values. */
     --transition-short: 0.1s;