Use full browser width with 2-column layout at 1100px+

Widened admin-main to 1400px max-width and added panel-cols/panel-col
wrappers so Kids, Courses, Spelling, and Flashcards all display content
on the left and forms/editors on the right on wider screens. Falls back
to single-column on smaller viewports.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 4.6 committed 2026-07-27 13:07:38 -04:00
1 parent adf4bf4cae
commit 4613946cea
2 files changed
+120 -85

No files matched your search

+10 -1
View File
@@ -333,11 +333,20 @@ table.results tr:nth-child(even) td { background: #faf7ee; }
}
.admin-logo { font-size: 1.3rem; font-weight: 800; color: var(--ink); text-decoration: none; }
.admin-nav { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.admin-main { max-width: 900px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.admin-main { max-width: 1400px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.admin-main h1 { margin-bottom: 1rem; clear: both; }
.admin-main h2 { margin: 1.5rem 0 0.5rem; font-size: 1.15rem; }
.panel { text-align: left; }
/* 2-column layout for wide screens */
.panel-cols { display: flex; flex-direction: column; gap: 1.5rem; }
.panel-col { min-width: 0; }
@media (min-width: 1100px) {
.panel-cols { flex-direction: row; align-items: start; gap: 2.5rem; }
.panel-col { flex: 1; }
.panel-col:first-child { flex: 1.2; }
}
.admin-card {
background: var(--card); border-radius: 14px; padding: 1.25rem;
margin: 0.75rem 0; box-shadow: 0 2px 8px rgba(45, 49, 66, 0.06);