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:
1 parent
adf4bf4cae
commit
4613946cea
2 files changed
+120
-85
No files matched your search
+10
-1
@@ -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);
|
||||
|
||||
Reference in new issue
Block a user