Make Window and UI smaller on Retina Macs

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

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;

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;

src-svelte/src/lib/Switch.svelte

@@ -10,18 +10,15 @@
 
 <script lang="ts">
   import { playSoundEffect } from "./sound";
-  import { animationSpeed } from "./preferences";
+  import { animationSpeed, ROOT_EM } from "./preferences";
   import getComponentId from "./label-id";
   import {
     draggable,
     type DragOptions,
     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;
@@ -197,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;
     }

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>

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));
+}

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;

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;
     }
   }
 

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;
     }

src-svelte/src/routes/credits/Credits.svelte

@@ -235,15 +235,17 @@
   }
 
   /* 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;
     }
   }
 
   /* 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;

src-svelte/src/routes/credits/Grid.svelte

@@ -11,22 +11,25 @@
   }
 
   /* 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;
     }
   }
 
   /* 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;

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;
     }

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;
 }

src-tauri/src/main.rs

@@ -77,6 +77,16 @@ fn main() {
                             });
                     });
 
+                    #[cfg(target_os = "macos")]
+                    {
+                        app.get_window("main")
+                            .ok_or(anyhow::anyhow!("No main window"))?
+                            .set_size(tauri::Size::Logical(tauri::LogicalSize {
+                                width: 600.0,
+                                height: 450.0,
+                            }))?;
+                    }
+
                     Ok(())
                 })
                 .manage(ZammDatabase(Mutex::new(possible_db)))