From eab1ae635a828560b7802aaca05afc216e752e9f Mon Sep 17 00:00:00 2001
From: Phat Pham <phat@onroads.xyz>
Date: Tue, 23 Jun 2026 18:55:36 +0700
Subject: [PATCH] feat: lay out Theme and UI density side by side in settings
 dialog

Wraps the two sections in a 2-column grid (Theme left, density right)
instead of stacking them, so each section's own choice grid no longer
needs to be 2-column internally.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 core/render.ts              |  6 ++++--
 web-static/static/style.css | 10 ++++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/core/render.ts b/core/render.ts
index 6a80b9c..51f5913 100644
--- a/core/render.ts
+++ b/core/render.ts
@@ -235,11 +235,12 @@ export function renderIndexPage(data: PageData): string {
           </button>
         </div>
         <p class="config-dialog-copy">Adjust the reader appearance and choose which sources appear in the feed.</p>
+        <div class="config-section-row">
         <section class="config-section" aria-labelledby="config-theme-title">
           <div class="config-section-header">
             <h3 id="config-theme-title" class="config-section-title">Theme</h3>
           </div>
-          <div class="config-options config-options--two-column config-options--choice-grid">
+          <div class="config-options config-options--choice-grid">
             <label class="config-option config-option--choice">
               <input type="radio" name="ui-theme" value="dark" data-theme-option checked />
               <span class="config-option-body config-option-body--choice">
@@ -269,7 +270,7 @@ export function renderIndexPage(data: PageData): string {
           <div class="config-section-header">
             <h3 id="config-density-title" class="config-section-title">UI density</h3>
           </div>
-          <div class="config-options config-options--two-column config-options--choice-grid">
+          <div class="config-options config-options--choice-grid">
             <label class="config-option config-option--choice">
               <input type="radio" name="ui-density" value="current" data-density-option checked />
               <span class="config-option-body config-option-body--choice">
@@ -296,6 +297,7 @@ export function renderIndexPage(data: PageData): string {
             </label>
           </div>
         </section>
+        </div>
         <section class="config-section" aria-labelledby="config-sources-title">
           <div class="config-section-header">
             <h3 id="config-sources-title" class="config-section-title">Sources</h3>
diff --git a/web-static/static/style.css b/web-static/static/style.css
index 4d466f1..d244611 100644
--- a/web-static/static/style.css
+++ b/web-static/static/style.css
@@ -426,6 +426,12 @@ button {
   gap: 0.65rem;
 }
 
+.config-section-row {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
 .config-section-header {
   display: flex;
   flex-direction: column;
@@ -894,6 +900,10 @@ body.is-dialog-open {
   gap: 0.5rem;
 }
 
+:root[data-ui-density="compact"] .config-section-row {
+  gap: 0.65rem;
+}
+
 :root[data-ui-density="compact"] .config-section-header {
   gap: 0.2rem;
 }