adjust placement of alpha warnings

oddbird · Jan 23, 2025 · d4dccb8 · d4dccb8
1 parent bdf6fc1
commit d4dccb8
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/src/lib/components/ratio/index.svelte b/src/lib/components/ratio/index.svelte
@@ -36,7 +36,7 @@
       <span class="result-ratio-number">{displayRatio}:1</span>
     </h3>
     {#if alphaWarning}
-      <p><Icon name="warning" />{alphaWarning}</p>
+      <p class="result-warning"><Icon name="warning" />{alphaWarning}</p>
     {/if}
 
     <p class="result-intro">
@@ -119,23 +119,25 @@
     display: grid;
     grid-area: contrastinfo;
     grid-template:
-      'heading' min-content
-      'number' min-content / 100%;
+      'heading heading' min-content
+      'number warning' var(--ratio-warning-height) / auto auto;
 
     @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
+      // fixed row height to prevent layout shift when warning appears
       grid-template:
         'heading number' min-content
+        'heading warning' var(--ratio-warning-height)
         'intro   intro' 1fr / auto var(--ratio-width);
     }
 
     @include config.above('lg-page-break') {
       gap: var(--shim);
       grid-template:
-        'heading' auto
-        'intro' auto
-        'number' auto / 100%;
+        'heading heading' auto
+        'intro intro' auto
+        'number warning' var(--ratio-warning-height) / var(--ratio-width) auto;
     }
   }
 
@@ -168,6 +170,10 @@
     }
   }
 
+  .result-warning {
+    grid-area: warning;
+  }
+
   .result-ratio-number {
     background-color: var(--status-result-bg, var(--bgcolor));
     border-radius: var(--border-radius);

diff --git a/src/sass/config/scale/_ui.scss b/src/sass/config/scale/_ui.scss
@@ -13,6 +13,7 @@ $icon-size-default: 1.125em;
 $icon-small: 0.65em;
 $icon-medium: 1.5em;
 $ratio-width: 10rem;
+$ratio-warning-height: 6rem;
 $range-thumb-size: 1.35rem;
 $range-input: 0.85rem;
 $triangle-width: var(--shim);