From 74e172e8963562cd5d497ac82e5da4cefa1a2280 Mon Sep 17 00:00:00 2001
From: Stacy Kvernmo <stacy@oddbird.net>
Date: Tue, 26 Sep 2023 11:36:32 -0500
Subject: [PATCH] add fixed ratio width to prevent jumping in results

---
 src/lib/components/ratio/index.svelte | 4 +++-
 src/sass/config/scale/_ui.scss        | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/ratio/index.svelte b/src/lib/components/ratio/index.svelte
index b1be86dc..953f01ae 100644
--- a/src/lib/components/ratio/index.svelte
+++ b/src/lib/components/ratio/index.svelte
@@ -98,9 +98,10 @@
 
     @include config.between('sm-column-break', 'lg-page-break') {
       gap: var(--shim) var(--gutter);
+      // fixed width column to prevent layout shift as the ratio number changes
       grid-template:
         'heading number' min-content
-        'intro   intro' 1fr / auto 1fr;
+        'intro   intro' 1fr / auto var(--ratio-width);
     }
 
     @include config.above('lg-page-break') {
@@ -134,6 +135,7 @@
     align-items: start;
     display: inline-flex;
     grid-area: number;
+    justify-content: flex-end;
     line-height: 0.7; // weird number alignment
   }
 
diff --git a/src/sass/config/scale/_ui.scss b/src/sass/config/scale/_ui.scss
index ac92be25..ff824f15 100644
--- a/src/sass/config/scale/_ui.scss
+++ b/src/sass/config/scale/_ui.scss
@@ -12,5 +12,6 @@ $swatch: 3.25rem;
 $icon-size-default: 1.125em;
 $icon-small: 0.65em;
 $icon-medium: 1.65em;
+$ratio-width: 10rem;
 $range-thumb-size: 1.35rem;
 $range-input: 0.85rem;