From e0acbc66e4f54670659f797926b3e260d1aa6a4f Mon Sep 17 00:00:00 2001
From: Amos Jun-yeung Ng <me@amos.ng>
Date: Tue, 30 Jul 2024 20:14:25 +0700
Subject: [PATCH 1/5] Make Window and UI smaller on Retina Macs

---
 src-svelte/src/routes/styles.css |  6 ++++++
 src-tauri/src/main.rs            | 13 ++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src-svelte/src/routes/styles.css b/src-svelte/src/routes/styles.css
index 6b683288..3322edf7 100644
--- a/src-svelte/src/routes/styles.css
+++ b/src-svelte/src/routes/styles.css
@@ -78,6 +78,12 @@
   font-size: 18px;
 }
 
+@media only screen and (-webkit-min-device-pixel-ratio: 2) {
+  :root {
+    font-size: 14px;
+  }
+}
+
 td, th {
   padding: 0;
 }
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 5753308c..3145bc6a 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -13,13 +13,14 @@ mod test_helpers;
 mod upgrades;
 mod views;
 
+use anyhow::anyhow;
 use clap::Parser;
 use diesel::sqlite::SqliteConnection;
 use futures::executor;
 use setup::api_keys::{setup_api_keys, ApiKeys};
 #[cfg(debug_assertions)]
 use specta::collect_types;
-use tauri::Manager;
+use tauri::{LogicalSize, Manager, Size};
 #[cfg(debug_assertions)]
 use tauri_specta::ts;
 use tokio::sync::Mutex;
@@ -77,6 +78,16 @@ fn main() {
                             });
                     });
 
+                    #[cfg(target_os = "macos")]
+                    {
+                        app.get_window("main")
+                            .ok_or(anyhow!("No main window"))?
+                            .set_size(Size::Logical(LogicalSize {
+                                width: 600.0,
+                                height: 450.0,
+                            }))?;
+                    }
+
                     Ok(())
                 })
                 .manage(ZammDatabase(Mutex::new(possible_db)))

From ca84d9c583d67ccf3464403032fc9d2644c1d3bc Mon Sep 17 00:00:00 2001
From: Amos Jun-yeung Ng <me@amos.ng>
Date: Thu, 1 Aug 2024 13:28:16 +0700
Subject: [PATCH 2/5] Adjust JS font sizes based on rem

---
 src-svelte/src/lib/InfoBox.svelte         |  9 +++++++--
 src-svelte/src/lib/Slider.svelte          |  6 ++----
 src-svelte/src/lib/Switch.svelte          |  7 ++-----
 src-svelte/src/lib/preferences.ts         | 18 ++++++++++++++++++
 src-svelte/src/routes/BackgroundUI.svelte |  4 ++--
 5 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/src-svelte/src/lib/InfoBox.svelte b/src-svelte/src/lib/InfoBox.svelte
index d93b4d09..1eb27f5b 100644
--- a/src-svelte/src/lib/InfoBox.svelte
+++ b/src-svelte/src/lib/InfoBox.svelte
@@ -244,7 +244,12 @@
   import getComponentId from "./label-id";
   import RoundDef from "./RoundDef.svelte";
   import { cubicInOut, cubicOut, linear } from "svelte/easing";
-  import { animationSpeed, animationsOn, transparencyOn } from "./preferences";
+  import {
+    animationSpeed,
+    animationsOn,
+    transparencyOn,
+    getAdjustedFontSize,
+  } from "./preferences";
   import { fade, type TransitionConfig } from "svelte/transition";
   import { firstAppLoad, firstPageLoad } from "./firstPageLoad";
   import { SubAnimation, PropertyAnimation } from "$lib/animation-timing";
@@ -267,7 +272,7 @@
     const parentNode = node.parentNode as Element;
     const actualWidth = parentNode.clientWidth;
     const actualHeight = parentNode.clientHeight;
-    const heightPerTitleLinePx = 26;
+    const heightPerTitleLinePx = getAdjustedFontSize(26);
     const titleHeight = (titleElement as HTMLElement).clientHeight;
     // multiply by 1.3 to account for small pixel differences between browsers
     const titleIsMultiline = titleHeight > heightPerTitleLinePx * 1.3;
diff --git a/src-svelte/src/lib/Slider.svelte b/src-svelte/src/lib/Slider.svelte
index 27d6b04f..2cfa41ee 100644
--- a/src-svelte/src/lib/Slider.svelte
+++ b/src-svelte/src/lib/Slider.svelte
@@ -6,14 +6,12 @@
     type DragOptions,
     type DragEventData,
   } from "@neodrag/svelte";
+  import { ROOT_EM } from "./preferences";
 
-  const rootFontSize = parseFloat(
-    getComputedStyle(document.documentElement).fontSize,
-  );
   const sliderId = getComponentId("slider");
   const transitionAnimation =
     `transition: ` + `transform var(--standard-duration) ease-out;`;
-  const overshoot = 0.4 * rootFontSize; // how much overshoot to allow per-side
+  const overshoot = 0.4 * ROOT_EM; // how much overshoot to allow per-side
 
   export let label: string | undefined = undefined;
   export let min = 0;
diff --git a/src-svelte/src/lib/Switch.svelte b/src-svelte/src/lib/Switch.svelte
index fff7e3fc..4f481b71 100644
--- a/src-svelte/src/lib/Switch.svelte
+++ b/src-svelte/src/lib/Switch.svelte
@@ -10,7 +10,7 @@
 
 <script lang="ts">
   import { playSoundEffect } from "./sound";
-  import { animationSpeed } from "./preferences";
+  import { animationSpeed, ROOT_EM } from "./preferences";
   import getComponentId from "./label-id";
   import {
     draggable,
@@ -18,10 +18,7 @@
     type DragEventData,
   } from "@neodrag/svelte";
 
-  const rootFontSize = parseFloat(
-    getComputedStyle(document.documentElement).fontSize,
-  );
-  const switchSize = 1 * rootFontSize;
+  const switchSize = 1 * ROOT_EM;
   const labelWidth = 3 * switchSize;
   const offLeft = -labelWidth;
   const onLeft = 0;
diff --git a/src-svelte/src/lib/preferences.ts b/src-svelte/src/lib/preferences.ts
index 537f197c..5864badd 100644
--- a/src-svelte/src/lib/preferences.ts
+++ b/src-svelte/src/lib/preferences.ts
@@ -12,3 +12,21 @@ export const standardDuration = derived(
   ([$animationsOn, $animationSpeed]) =>
     $animationsOn ? 100 / $animationSpeed : 0,
 );
+
+const STANDARD_ROOT_EM = 18;
+
+function getRootFontSize() {
+  const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
+
+  if (isNaN(rem)) {
+    console.warn("Could not get root font size, assuming default of 18px");
+    return 18;
+  }
+  return rem;
+}
+
+export const ROOT_EM = getRootFontSize();
+
+export function getAdjustedFontSize(fontSize: number) {
+  return Math.round(fontSize * (ROOT_EM / STANDARD_ROOT_EM));
+}
diff --git a/src-svelte/src/routes/BackgroundUI.svelte b/src-svelte/src/routes/BackgroundUI.svelte
index 50e305b3..dfe8e244 100644
--- a/src-svelte/src/routes/BackgroundUI.svelte
+++ b/src-svelte/src/routes/BackgroundUI.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { standardDuration } from "$lib/preferences";
+  import { standardDuration, getAdjustedFontSize } from "$lib/preferences";
   import prand from "pure-rand";
 
   const rng = prand.xoroshiro128plus(8650539321744612);
-  const CHAR_EM = 26;
+  const CHAR_EM = getAdjustedFontSize(26);
   const CHAR_GAP = 2;
   const TEXT_FONT = CHAR_EM + "px 'Zhi Mang Xing', sans-serif";
   const BLOCK_SIZE = CHAR_EM + CHAR_GAP;

From a0db8227d23e33c1a95cb34784f98e39463fab42 Mon Sep 17 00:00:00 2001
From: Amos Jun-yeung Ng <me@amos.ng>
Date: Thu, 1 Aug 2024 13:29:15 +0700
Subject: [PATCH 3/5] Make Svelte quick tests command interactive

---
 src-svelte/Makefile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-svelte/Makefile b/src-svelte/Makefile
index 873eab4e..1e5b844a 100644
--- a/src-svelte/Makefile
+++ b/src-svelte/Makefile
@@ -18,7 +18,7 @@ update-local-screenshots:
 	cp -r screenshots/local/testing/actual/* screenshots/baseline/
 
 quick-test:
-	yarn vitest --pool=forks --exclude src/routes/storybook.test.ts run
+	yarn vitest --pool=forks --exclude src/routes/storybook.test.ts
 
 test:
 	yarn test

From cdc983f9d05ab6a67981b1b6d19497efaf516f5d Mon Sep 17 00:00:00 2001
From: Amos Jun-yeung Ng <me@amos.ng>
Date: Thu, 1 Aug 2024 13:33:08 +0700
Subject: [PATCH 4/5] Avoid cargo import reformat on non-Mac OS platforms

---
 src-tauri/src/main.rs | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 3145bc6a..14a81e3e 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -13,14 +13,13 @@ mod test_helpers;
 mod upgrades;
 mod views;
 
-use anyhow::anyhow;
 use clap::Parser;
 use diesel::sqlite::SqliteConnection;
 use futures::executor;
 use setup::api_keys::{setup_api_keys, ApiKeys};
 #[cfg(debug_assertions)]
 use specta::collect_types;
-use tauri::{LogicalSize, Manager, Size};
+use tauri::Manager;
 #[cfg(debug_assertions)]
 use tauri_specta::ts;
 use tokio::sync::Mutex;
@@ -81,8 +80,8 @@ fn main() {
                     #[cfg(target_os = "macos")]
                     {
                         app.get_window("main")
-                            .ok_or(anyhow!("No main window"))?
-                            .set_size(Size::Logical(LogicalSize {
+                            .ok_or(anyhow::anyhow!("No main window"))?
+                            .set_size(tauri::Size::Logical(tauri::LogicalSize {
                                 width: 600.0,
                                 height: 450.0,
                             }))?;

From c77010d0d719d3c16fc5bccf0e92b735b549c429 Mon Sep 17 00:00:00 2001
From: Amos Jun-yeung Ng <me@amos.ng>
Date: Thu, 1 Aug 2024 13:49:21 +0700
Subject: [PATCH 5/5] Adapt media queries to Retina screens as well

---
 src-svelte/src/lib/Switch.svelte                      |  3 ++-
 src-svelte/src/lib/controls/ButtonGroup.svelte        |  6 ++++--
 .../src/routes/api-calls/[slug]/ApiCallDisplay.svelte | 11 ++++++-----
 src-svelte/src/routes/credits/Creditor.svelte         |  3 ++-
 src-svelte/src/routes/credits/Credits.svelte          |  6 ++++--
 src-svelte/src/routes/credits/Grid.svelte             |  9 ++++++---
 src-svelte/src/routes/settings/Settings.svelte        |  3 ++-
 7 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/src-svelte/src/lib/Switch.svelte b/src-svelte/src/lib/Switch.svelte
index 4f481b71..0835a35e 100644
--- a/src-svelte/src/lib/Switch.svelte
+++ b/src-svelte/src/lib/Switch.svelte
@@ -194,7 +194,8 @@
     cursor: pointer;
   }
 
-  @media (min-width: 52rem) {
+  @media (min-width: 52rem),
+    only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 39rem) {
     label {
       white-space: nowrap;
     }
diff --git a/src-svelte/src/lib/controls/ButtonGroup.svelte b/src-svelte/src/lib/controls/ButtonGroup.svelte
index 5175800b..7bd73fe6 100644
--- a/src-svelte/src/lib/controls/ButtonGroup.svelte
+++ b/src-svelte/src/lib/controls/ButtonGroup.svelte
@@ -12,6 +12,7 @@
 
   .button-container {
     display: flex;
+    flex-direction: column;
   }
 
   .button-container :global(.left-end) {
@@ -22,9 +23,10 @@
     --cut-bottom-right: 8px;
   }
 
-  @media (max-width: 35rem) {
+  @media (min-width: 35rem),
+    only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 26rem) {
     .button-container {
-      flex-direction: column;
+      flex-direction: row;
     }
   }
 </style>
diff --git a/src-svelte/src/routes/api-calls/[slug]/ApiCallDisplay.svelte b/src-svelte/src/routes/api-calls/[slug]/ApiCallDisplay.svelte
index 3e0e6b70..29c9184f 100644
--- a/src-svelte/src/routes/api-calls/[slug]/ApiCallDisplay.svelte
+++ b/src-svelte/src/routes/api-calls/[slug]/ApiCallDisplay.svelte
@@ -209,26 +209,27 @@
 
   .conversation-links {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     gap: 0.5rem;
   }
 
   .conversation.previous-links,
   .conversation.next-links {
-    flex: 1;
+    flex: none;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
   }
 
-  @media (max-width: 46rem) {
+  @media (min-width: 46rem),
+    only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 34.5rem) {
     .conversation-links {
-      flex-direction: column;
+      flex-direction: row;
     }
 
     .conversation.previous-links,
     .conversation.next-links {
-      flex: none;
+      flex: 1;
     }
   }
 
diff --git a/src-svelte/src/routes/credits/Creditor.svelte b/src-svelte/src/routes/credits/Creditor.svelte
index b780a90f..c95edf2f 100644
--- a/src-svelte/src/routes/credits/Creditor.svelte
+++ b/src-svelte/src/routes/credits/Creditor.svelte
@@ -91,7 +91,8 @@
     width: 14rem;
   }
 
-  @media (min-width: 46rem) {
+  @media (min-width: 46rem),
+    only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 34.5rem) {
     .creditor {
       padding: 0.75rem;
     }
diff --git a/src-svelte/src/routes/credits/Credits.svelte b/src-svelte/src/routes/credits/Credits.svelte
index bc3ef63c..b7ed8072 100644
--- a/src-svelte/src/routes/credits/Credits.svelte
+++ b/src-svelte/src/routes/credits/Credits.svelte
@@ -235,7 +235,8 @@
   }
 
   /* this takes sidebar width into account */
-  @media (min-width: 46rem) {
+  @media (min-width: 46rem),
+    only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 34.5rem) {
     .credits-container
       :global(.sub-info-box:last-child .creditor:nth-last-child(2)) {
       padding-bottom: 0;
@@ -243,7 +244,8 @@
   }
 
   /* this takes sidebar width into account */
-  @media (min-width: 64rem) {
+  @media (min-width: 64rem),
+    only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 48rem) {
     .credits-container
       :global(.sub-info-box:last-child .creditor:nth-last-child(3)) {
       padding-bottom: 0;
diff --git a/src-svelte/src/routes/credits/Grid.svelte b/src-svelte/src/routes/credits/Grid.svelte
index fee2644b..2c84415b 100644
--- a/src-svelte/src/routes/credits/Grid.svelte
+++ b/src-svelte/src/routes/credits/Grid.svelte
@@ -11,7 +11,8 @@
   }
 
   /* this takes sidebar width into account */
-  @media (min-width: 46rem) {
+  @media (min-width: 46rem),
+    only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 34.5rem) {
     .credits-grid {
       grid-template-columns: 1fr 1fr;
       justify-items: end;
@@ -19,14 +20,16 @@
   }
 
   /* this takes sidebar width into account */
-  @media (min-width: 55rem) {
+  @media (min-width: 55rem),
+    only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 41rem) {
     .credits-grid {
       justify-items: center;
     }
   }
 
   /* this takes sidebar width into account */
-  @media (min-width: 64rem) {
+  @media (min-width: 64rem),
+    only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 48rem) {
     .credits-grid {
       grid-template-columns: 1fr 1fr 1fr;
       justify-items: center;
diff --git a/src-svelte/src/routes/settings/Settings.svelte b/src-svelte/src/routes/settings/Settings.svelte
index a23863f7..d97d8445 100644
--- a/src-svelte/src/routes/settings/Settings.svelte
+++ b/src-svelte/src/routes/settings/Settings.svelte
@@ -119,7 +119,8 @@
   }
 
   /* this takes sidebar width into account */
-  @media (min-width: 52rem) {
+  @media (min-width: 52rem),
+    only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 39rem) {
     .container :global(.sub-info-box .content) {
       grid-template-columns: 1fr 1fr;
     }