Render correct OS names.

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 />

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}