From ea54c127a7537b9295ad025ed58dda8585bc31ce Mon Sep 17 00:00:00 2001
From: dvdherron <dvdherron@gmail.com>
Date: Mon, 18 Dec 2023 15:44:00 +0100
Subject: [PATCH] adjust grid for color issues

---
 src/lib/components/ratio/ColorIssues.svelte | 19 +++++++++++++++----
 src/lib/components/ratio/index.svelte       |  8 ++++++--
 src/sass/patterns/_lists.scss               |  1 -
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index 655bdee..99d53b5 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -11,9 +11,9 @@
   });
 </script>
 
-<details open={startOpen} data-pass={pass}>
+<details class="known-issues" open={startOpen} data-pass={pass}>
   <summary><strong>Known Color Issues</strong></summary>
-  <dl>
+  <dl class="issues-list">
     <dt><strong>Gamut Mapping Implementation</strong></dt>
     <dd>
       <p>
@@ -29,10 +29,21 @@
 </details>
 
 <style lang="scss">
-  dl {
-    display: block;
+  .known-issues {
+    grid-area: knownissues;
+    padding: var(--shim) var(--double-gutter);
+  }
+  .issues-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-auto-rows: auto;
+    gap: var(--gutter);
   }
   dd {
     --description-margin-inline: 0;
   }
+
+  p {
+    margin-block-end: var(--gutter);
+  }
 </style>
diff --git a/src/lib/components/ratio/index.svelte b/src/lib/components/ratio/index.svelte
index f9f7f50..f7e68b9 100644
--- a/src/lib/components/ratio/index.svelte
+++ b/src/lib/components/ratio/index.svelte
@@ -79,11 +79,15 @@
     gap: var(--result-layout-gap, var(--double-gutter));
     grid-template:
       'contrastinfo' min-content
-      'status' min-content / 1fr;
+      'status' min-content
+      'contrastdefined' min-content
+      'knownissues' min-content / 1fr;
 
     @include config.between('sm-page-break', 'lg-page-break') {
       --result-layout-gap: var(--gutter-plus);
-      grid-template: 'contrastinfo status' auto / 1fr 1fr;
+      grid-template:
+        'contrastinfo status' auto
+        '... knownissues' auto / 1fr 1fr;
     }
 
     @include config.above('lg-page-break') {
diff --git a/src/sass/patterns/_lists.scss b/src/sass/patterns/_lists.scss
index ebeff9f..987ac11 100644
--- a/src/sass/patterns/_lists.scss
+++ b/src/sass/patterns/_lists.scss
@@ -26,7 +26,6 @@ details {
 summary {
   cursor: pointer;
   list-style-position: outside;
-  margin-block-end: var(--gutter);
 }
 
 dl {