From e67282d7d895a7c430174a6b343d05df8fe54c88 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Fri, 8 Dec 2023 22:14:55 -0800
Subject: [PATCH] Render correct OS names.

---
 src/components/input/SettingsButton.tsx |  7 +------
 src/components/metrics/OSTable.tsx      | 10 ++++++++--
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/input/SettingsButton.tsx b/src/components/input/SettingsButton.tsx
index 46c72597..2a076d42 100644
--- a/src/components/input/SettingsButton.tsx
+++ b/src/components/input/SettingsButton.tsx
@@ -15,12 +15,7 @@ export function SettingsButton() {
           <Icons.Gear />
         </Icon>
       </Button>
-      <Popup
-        className={styles.popup}
-        position="bottom"
-        alignment="end"
-        onClick={e => e.stopPropagation()}
-      >
+      <Popup className={styles.popup} position="bottom" alignment="end">
         <Form>
           <FormRow label={formatMessage(labels.timezone)}>
             <TimezoneSetting />
diff --git a/src/components/metrics/OSTable.tsx b/src/components/metrics/OSTable.tsx
index e8b8e81f..c39cba22 100644
--- a/src/components/metrics/OSTable.tsx
+++ b/src/components/metrics/OSTable.tsx
@@ -2,14 +2,20 @@ import MetricsTable from './MetricsTable';
 import FilterLink from 'components/common/FilterLink';
 import useMessages from 'components/hooks/useMessages';
 
+const names = {
+  'Mac OS': 'macOS',
+  'Chrome OS': 'ChromeOS',
+  'Sun OS': 'SunOS',
+};
+
 export function OSTable({ websiteId, limit }: { websiteId: string; limit?: number }) {
   const { formatMessage, labels } = useMessages();
 
   function renderLink({ x: os }) {
     return (
-      <FilterLink id="os" value={os}>
+      <FilterLink id="os" value={names[os] || os}>
         <img
-          src={`${process.env.basePath}/images/os/${
+          src={`${process.env.basePath || ''}/images/os/${
             os?.toLowerCase().replaceAll(/\W/g, '-') || 'unknown'
           }.png`}
           alt={os}