fix: address CodeRabbit review — a11y, overflow, nested interactive

- Remove nested <a>/<button> — use RouterLink directly for nav arrows
- Add aria-labels to settings open/close buttons
- Add aria-hidden to decorative card image
- Fix content-box overflow with calc() max-width
- Add mobile breakpoints for landing page (768px)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: rsbh

packages/chronicle/src/pages/LandingPage.module.css

@@ -144,3 +144,26 @@
   line-height: 1.4;
   color: var(--rs-color-foreground-base-primary);
 }
+
+@media (max-width: 768px) {
+  .header {
+    flex-direction: column;
+    gap: var(--rs-space-5);
+  }
+
+  .title {
+    font-size: 36px;
+  }
+
+  .description {
+    width: 100%;
+  }
+
+  .card {
+    width: 100%;
+  }
+
+  .cardImage {
+    max-width: 100%;
+  }
+}

packages/chronicle/src/pages/LandingPage.tsx

@@ -23,7 +23,7 @@ export function LandingPage() {
       <div className={styles.grid}>
         {entries.map((entry, i) => (
           <RouterLink key={entry.href} to={entry.href} className={styles.card}>
-            <div className={styles.cardImage}>
+            <div className={styles.cardImage} aria-hidden='true'>
               <span className={`${styles.cardImageLabel} ${styles.cardImageLabelTop}`}>
                 Fig_{String(i + 1).padStart(3, '0')}
               </span>

packages/chronicle/src/themes/paper/Page.module.css

@@ -1,8 +1,7 @@
 .main {
   flex: 1;
   width: 90%;
-  max-width: 1024px;
-  box-sizing: content-box;
+  max-width: calc(1024px + var(--rs-space-17));
   margin: 0 auto;
   padding-top: var(--rs-space-12);
   padding-right: var(--rs-space-17);
@@ -45,10 +44,27 @@
   gap: var(--rs-space-2);
 }
 
-.arrows a {
+.arrowLink {
   display: flex;
+  align-items: center;
+  justify-content: center;
   text-decoration: none;
-  color: inherit;
+  color: var(--rs-color-foreground-base-primary);
+  padding: var(--rs-space-1);
+  border-radius: var(--rs-radius-2);
+}
+
+.arrowLink:hover {
+  color: var(--rs-color-foreground-accent-primary);
+}
+
+.arrowDisabled {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--rs-color-foreground-base-tertiary);
+  opacity: 0.4;
+  padding: var(--rs-space-1);
 }
 
 .breadcrumb {

packages/chronicle/src/themes/paper/Page.tsx

@@ -52,26 +52,22 @@ export function Page({ page, tree }: ThemePageProps) {
           <div className={styles.navLeft}>
             <div className={styles.arrows}>
               {prev ? (
-                <RouterLink to={prev.url} aria-label='Previous page'>
-                  <IconButton size={2}>
-                    <ArrowLeftIcon width={14} height={14} />
-                  </IconButton>
+                <RouterLink to={prev.url} className={styles.arrowLink} aria-label='Previous page'>
+                  <ArrowLeftIcon width={14} height={14} />
                 </RouterLink>
               ) : (
-                <IconButton size={2} disabled>
+                <span className={styles.arrowDisabled} aria-hidden='true'>
                   <ArrowLeftIcon width={14} height={14} />
-                </IconButton>
+                </span>
               )}
               {next ? (
-                <RouterLink to={next.url} aria-label='Next page'>
-                  <IconButton size={2}>
-                    <ArrowRightIcon width={14} height={14} />
-                  </IconButton>
+                <RouterLink to={next.url} className={styles.arrowLink} aria-label='Next page'>
+                  <ArrowRightIcon width={14} height={14} />
                 </RouterLink>
               ) : (
-                <IconButton size={2} disabled>
+                <span className={styles.arrowDisabled} aria-hidden='true'>
                   <ArrowRightIcon width={14} height={14} />
-                </IconButton>
+                </span>
               )}
             </div>
             <nav className={styles.breadcrumb}>
@@ -107,12 +103,12 @@ export function Page({ page, tree }: ThemePageProps) {
                     }
                   </IconButton>
                 )}
-                <IconButton size={2} onClick={() => setSettingsOpen(false)}>
+                <IconButton size={2} onClick={() => setSettingsOpen(false)} aria-label='Close settings'>
                   <XMarkIcon width={14} height={14} />
                 </IconButton>
               </>
             ) : (
-              <IconButton size={2} onClick={() => setSettingsOpen(true)}>
+              <IconButton size={2} onClick={() => setSettingsOpen(true)} aria-label='Open settings'>
                 <AdjustmentsHorizontalIcon width={14} height={14} />
               </IconButton>
             )}