diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index f83f1e3..9c094f2 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -1,25 +1,13 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-
   import ExternalLink from '$lib/components/util/ExternalLink.svelte';
-
-  interface Props {
-    pass: boolean;
-  }
-
-  let { pass }: Props = $props();
-
-  let startOpen = $state(false);
-  onMount(() => {
-    startOpen = window.matchMedia('(min-width: 80em)').matches;
-  });
 </script>
 
-<details class="known-issues" open={startOpen} data-pass={pass}>
-  <summary>Known Color Issues</summary>
-  <dl class="issues-list">
-    <dt>Gamut Mapping Implementation</dt>
-    <dd>
+<hr />
+<div class="known-issues">
+  <h2 class="section-heading">Known Color Issues</h2>
+  <ul class="issues-list">
+    <li>
+      <h3 class="list-item-heading">Gamut Mapping Implementation</h3>
       <p>
         Browsers implemented gamut mapping using clipping, which is fast but
         provides inferior results compared to the algorithm defined in the <ExternalLink
@@ -28,9 +16,9 @@
         >. Until browsers are updated, colors that are out of gamut for your
         screen may be displayed very differently than expected.
       </p>
-    </dd>
-    <dt>Checking for Out of Gamut Colors</dt>
-    <dd>
+    </li>
+    <li>
+      <h3 class="list-item-heading">Checking for Out of Gamut Colors</h3>
       <p>
         The new color features in CSS allow for a much wider range of colors,
         many of which cannot be shown on many (or any) screens. When selecting
@@ -53,42 +41,25 @@
         When a color is out of gamut for the user's screen, the browser will
         adjust the color to be in gamut.
       </p>
-    </dd>
-  </dl>
-</details>
+    </li>
+  </ul>
+</div>
 
 <style lang="scss">
-  @use 'config';
-  .known-issues {
-    grid-area: knownissues;
-    padding: var(--gutter);
-
-    @include config.above('lg-page-break') {
-      margin-inline: calc(var(--gutter) * -1);
-    }
+  hr {
+    border: unset;
+    border-block-start: var(--border-width) solid var(--border-light);
+    margin-block-end: var(--spacer);
+    margin-inline: var(--double-gutter);
   }
 
-  summary {
-    align-items: center;
-    display: grid;
-    gap: var(--shim-plus);
-    grid-template-columns: max-content var(--triangle-height);
+  .known-issues {
+    margin-block-end: var(--spacer);
   }
 
   .issues-list {
-    display: grid;
-    gap: var(--half-shim);
-    grid-auto-rows: auto;
-    grid-template-columns: 1fr;
     margin-block-start: var(--gutter);
-  }
-
-  dt {
-    font-weight: bold;
-  }
-
-  dd {
-    --description-margin-inline: 0;
+    max-inline-size: 85ch;
   }
 
   p {
diff --git a/src/lib/components/ratio/index.svelte b/src/lib/components/ratio/index.svelte
index 7275d7e..75c98f5 100644
--- a/src/lib/components/ratio/index.svelte
+++ b/src/lib/components/ratio/index.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { contrast } from 'colorjs.io/fn';
 
-  import ColorIssues from '$lib/components/ratio/ColorIssues.svelte';
   import Result from '$lib/components/ratio/Result.svelte';
   import ExternalLink from '$lib/components/util/ExternalLink.svelte';
   import { RATIOS } from '$lib/constants';
@@ -66,7 +65,6 @@
       <dd>Bold Weight</dd>
     </dl>
   </div>
-  <ColorIssues {pass} />
 </aside>
 
 <style lang="scss">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f3a1494..32c7402 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -10,6 +10,7 @@
   import Header from '$lib/components/Header.svelte';
   import Ratio from '$lib/components/ratio/index.svelte';
   import { bg, fg, format } from '$lib/stores';
+  import ColorIssues from '$src/lib/components/ratio/ColorIssues.svelte';
   import { hashToStoreValues, storeValuesToHash } from '$src/lib/utils';
 
   let bg_fallback = $derived(display($bg));
@@ -49,6 +50,7 @@
   <Ratio />
   <main data-layout="main">
     <Colors />
+    <ColorIssues />
   </main>
   <Footer />
 </div>
diff --git a/src/sass/patterns/_disclosure.scss b/src/sass/patterns/_disclosure.scss
deleted file mode 100644
index 2e2f9c0..0000000
--- a/src/sass/patterns/_disclosure.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-// The Details disclosure element
-// ------------------------------
-
-details {
-  --link: var(--fgcolor);
-  --link-focus: var(--fgcolor);
-
-  background-color: var(--status-result-bg, var(--bgcolor));
-  border-radius: var(--border-radius);
-  color: var(--status-result-fg, var(--fgcolor));
-}
-
-summary {
-  cursor: pointer;
-  font-weight: bold;
-
-  // Hides marker some browsers add
-  &::marker {
-    content: none;
-  }
-
-  // Hides marker webkit adds
-  &::-webkit-details-marker {
-    display: none;
-  }
-
-  &::before {
-    border-color: transparent transparent transparent currentcolor;
-    border-style: solid;
-    border-width: var(--triangle-width) 0 var(--triangle-width)
-      var(--triangle-height);
-    content: '';
-    grid-column: 2;
-    grid-row: 1;
-    margin-block-start: var(--half-shim);
-    rotate: var(--rotate-triangle, none);
-    transition: rotate var(--fast);
-
-    [open] & {
-      --rotate-triangle: 90deg;
-    }
-  }
-}
diff --git a/src/sass/patterns/_index.scss b/src/sass/patterns/_index.scss
index 902cbf1..85b59cb 100644
--- a/src/sass/patterns/_index.scss
+++ b/src/sass/patterns/_index.scss
@@ -7,5 +7,4 @@
 @forward 'buttons';
 @forward 'icons';
 @forward 'lists';
-@forward 'disclosure';
 @forward 'themes';
diff --git a/src/sass/patterns/_lists.scss b/src/sass/patterns/_lists.scss
index ede95de..9d819bd 100644
--- a/src/sass/patterns/_lists.scss
+++ b/src/sass/patterns/_lists.scss
@@ -27,3 +27,8 @@ dl {
 dd {
   margin-inline-start: var(--description-margin-inline, var(--gutter));
 }
+
+.list-item-heading {
+  font-size: var(--small);
+  font-weight: bold;
+}