add fixed ratio width to prevent jumping in results

oddbird · Sep 26, 2023 · 74e172e · 74e172e
1 parent 63738d3
commit 74e172e
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git 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
@@ -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;