fix content overflow

Author: tcurrent

ui/dist/styles.css

@@ -315,9 +315,9 @@
   }
   .app-shell {
     margin-inline: auto;
-    display: grid;
+    display: flex;
     max-width: var(--container-6xl);
-    grid-template-columns: repeat(1, minmax(0, 1fr));
+    flex-direction: column;
     gap: calc(var(--spacing) * 3);
     @media (width >= 48rem) {
       margin-right: calc(var(--spacing) * 6);
@@ -1012,6 +1012,7 @@
     gap: calc(var(--spacing) * 3);
   }
   .section-card {
+    min-width: calc(var(--spacing) * 0);
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: #2a2a2a;
@@ -1124,6 +1125,14 @@
     line-height: calc(var(--spacing) * 7);
     color: var(--color-zinc-200);
   }
+  .markdown-content h1,
+  .markdown-content h2,
+  .markdown-content h3,
+  .markdown-content h4,
+  .markdown-content h5,
+  .markdown-content h6 {
+    scroll-margin-top: 4rem;
+  }
   .markdown-content h1 {
     margin-top: calc(var(--spacing) * 1);
     margin-bottom: calc(var(--spacing) * 4);
@@ -1166,6 +1175,9 @@
     display: grid;
     gap: calc(var(--spacing) * 1);
   }
+  .markdown-content li {
+    min-width: 0;
+  }
   .markdown-content ul {
     list-style-type: disc;
   }

ui/styles.css

@@ -17,7 +17,7 @@
   }
 
   .app-shell {
-    @apply mx-auto grid max-w-6xl grid-cols-1 gap-3 md:ml-[288px] md:mr-6;
+    @apply mx-auto flex flex-col max-w-6xl gap-3 md:ml-[288px] md:mr-6;
   }
 
   .auth-shell {
@@ -304,7 +304,7 @@
   }
 
   .section-card {
-    @apply border border-line bg-elevated shadow-[0_18px_40px_rgba(0,0,0,0.28)];
+    @apply min-w-0 border border-line bg-elevated shadow-[0_18px_40px_rgba(0,0,0,0.28)];
   }
 
   .section-header {
@@ -359,6 +359,15 @@
     @apply text-sm leading-7 text-zinc-200;
   }
 
+  .markdown-content h1,
+  .markdown-content h2,
+  .markdown-content h3,
+  .markdown-content h4,
+  .markdown-content h5,
+  .markdown-content h6 {
+    scroll-margin-top: 4rem;
+  }
+
   .markdown-content h1 {
     @apply mt-1 mb-4 text-3xl font-black tracking-[-0.03em] text-ink;
   }
@@ -380,6 +389,10 @@
     @apply my-3 ml-5 grid gap-1;
   }
 
+  .markdown-content li {
+    min-width: 0;
+  }
+
   .markdown-content ul {
     @apply list-disc;
   }