Feat v0.6.13 responsive spacing
Some checks failed
CI/CD / detect-changes (pull_request) Successful in 4s
CI/CD / test-frontend (pull_request) Successful in 6s
CI/CD / build-and-deploy (pull_request) Has been cancelled
CI/CD / test-sqlite (pull_request) Has been cancelled
CI/CD / test-go-pg (pull_request) Has been cancelled

Add spacing token scale (--sp-1 through --sp-12, 4px grid) and tablet
breakpoint (max-width: 1024px). Migrate all kernel CSS and 12 in-tree
extension packages from hardcoded padding/margin/gap to design tokens.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-01 12:24:28 +00:00
parent 221ae94f4f
commit ffa7e85551
25 changed files with 625 additions and 526 deletions

View File

@@ -13,7 +13,7 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
@@ -22,7 +22,7 @@
.ext-git-board-header__right {
display: flex;
align-items: center;
gap: 10px;
gap: var(--sp-3);
}
.ext-git-board-title {
@@ -39,7 +39,7 @@
color: var(--text);
font-family: var(--mono);
font-size: 13px;
padding: 5px 8px;
padding: 5px var(--sp-2);
max-width: 260px;
}
@@ -49,20 +49,20 @@
max-width: 480px;
margin: 60px auto;
text-align: center;
padding: 0 16px;
padding: 0 var(--sp-4);
}
.ext-git-board-setup h2 {
color: var(--text);
font-size: 20px;
margin: 0 0 8px;
margin: 0 0 var(--sp-2);
}
.ext-git-board-setup p {
color: var(--text-2);
font-size: 14px;
line-height: 1.5;
margin: 0 0 20px;
margin: 0 0 var(--sp-5);
}
@@ -75,8 +75,8 @@
.ext-git-board-board {
display: flex;
gap: 12px;
padding: 12px 16px;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
flex: 1;
overflow-x: auto;
overflow-y: hidden;
@@ -98,7 +98,7 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
padding: var(--sp-3) var(--sp-3);
border-bottom: 1px solid var(--border);
}
@@ -122,10 +122,10 @@
.ext-git-board-column__cards {
flex: 1;
overflow-y: auto;
padding: 8px;
padding: var(--sp-2);
display: flex;
flex-direction: column;
gap: 6px;
gap: var(--sp-2);
}
/* ── Cards ───────────────────────────────── */
@@ -135,7 +135,7 @@
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 10px;
padding: var(--sp-3);
text-decoration: none;
color: var(--text);
transition: border-color var(--transition), background var(--transition);
@@ -154,8 +154,8 @@
.ext-git-board-card__header {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
gap: var(--sp-2);
margin-bottom: var(--sp-1);
}
.ext-git-board-card__number {
@@ -191,19 +191,19 @@
.ext-git-board-card__labels {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 6px;
gap: var(--sp-1);
margin-top: var(--sp-2);
}
.ext-git-board-card__labels .ext-git-board-badge {
font-size: 10px;
padding: 1px 6px;
padding: 1px var(--sp-2);
}
.ext-git-board-card__meta {
display: flex;
justify-content: space-between;
margin-top: 6px;
margin-top: var(--sp-2);
font-size: 11px;
color: var(--text-3);
}
@@ -247,7 +247,7 @@
display: flex;
align-items: flex-start;
justify-content: center;
padding: 40px 16px;
padding: var(--sp-10) var(--sp-4);
overflow-y: auto;
}
@@ -268,7 +268,7 @@
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 16px 20px;
padding: var(--sp-4) var(--sp-5);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
@@ -276,7 +276,7 @@
.ext-git-board-modal__title-row {
display: flex;
align-items: baseline;
gap: 8px;
gap: var(--sp-2);
flex: 1;
min-width: 0;
}
@@ -295,7 +295,7 @@
color: var(--text-3);
font-size: 18px;
cursor: pointer;
padding: 2px 6px;
padding: 2px var(--sp-2);
border-radius: var(--radius);
flex-shrink: 0;
}
@@ -306,7 +306,7 @@
.ext-git-board-modal__body {
overflow-y: auto;
padding: 16px 20px;
padding: var(--sp-4) var(--sp-5);
flex: 1;
min-height: 0;
}
@@ -314,9 +314,9 @@
.ext-git-board-modal__meta {
display: flex;
align-items: center;
gap: 10px;
gap: var(--sp-3);
flex-wrap: wrap;
margin-bottom: 12px;
margin-bottom: var(--sp-3);
font-size: 12px;
color: var(--text-2);
}
@@ -336,8 +336,8 @@
}
.ext-git-board-modal__description {
margin-bottom: 20px;
padding-bottom: 16px;
margin-bottom: var(--sp-5);
padding-bottom: var(--sp-4);
border-bottom: 1px solid var(--border);
}
@@ -367,13 +367,13 @@
color: var(--text-2);
text-transform: uppercase;
letter-spacing: 0.03em;
margin: 0 0 12px;
margin: 0 0 var(--sp-3);
}
/* ── Comments ────────────────────────────── */
.ext-git-board-comment {
padding: 10px 0;
padding: var(--sp-3) 0;
border-bottom: 1px solid var(--border);
}
.ext-git-board-comment:last-child {
@@ -383,8 +383,8 @@
.ext-git-board-comment__header {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 4px;
gap: var(--sp-2);
margin-bottom: var(--sp-1);
font-size: 12px;
}
.ext-git-board-comment__header strong {
@@ -407,8 +407,8 @@
/* ── Add Comment ─────────────────────────── */
.ext-git-board-modal__add-comment {
margin-top: 16px;
padding-top: 16px;
margin-top: var(--sp-4);
padding-top: var(--sp-4);
border-top: 1px solid var(--border);
}
@@ -420,7 +420,7 @@
color: var(--text);
font-family: var(--font);
font-size: 13px;
padding: 8px 10px;
padding: var(--sp-2) var(--sp-3);
resize: vertical;
outline: none;
box-sizing: border-box;
@@ -431,8 +431,8 @@
.ext-git-board-modal__actions {
display: flex;
gap: 8px;
margin-top: 8px;
gap: var(--sp-2);
margin-top: var(--sp-2);
justify-content: flex-end;
}