diff --git a/TASKS.md b/TASKS.md index f56d12d..3e31727 100644 --- a/TASKS.md +++ b/TASKS.md @@ -2,17 +2,16 @@ ## Current -### `feat/ui-concept-alignment` +### `feat/ui-width-spacing` Status: completed DoD: -- shell и create flow визуально опираются на утвержденный concept -- sidebar, topbar и page header выглядят как единая продуктовая система -- create page больше не выглядит как длинная сырая форма, а как step-based contract builder -- кодовые JSON и mapping поля имеют отдельную визуальную подачу -- UI build и tests остаются зелеными после выравнивания под concept +- рабочая область create page не растягивается на всю ширину экрана +- step cards имеют нормальные внутренние отступы +- поля и редакторы не липнут к левому краю +- UI build остается зеленым ## Next diff --git a/apps/ui/src/styles.css b/apps/ui/src/styles.css index 9204989..251240f 100644 --- a/apps/ui/src/styles.css +++ b/apps/ui/src/styles.css @@ -316,7 +316,10 @@ button { } .main-content { + width: 100%; + max-width: 1480px; padding: 28px; + margin: 0 auto; flex: 1; } @@ -400,6 +403,11 @@ button { gap: 16px; } +.builder-stack { + width: 100%; + max-width: 1320px; +} + .page-section, .builder-card, .operation-card, @@ -425,9 +433,16 @@ button { align-items: flex-start; justify-content: space-between; gap: 12px; +} + +.section-header { margin-bottom: 16px; } +.builder-card-header { + padding: 20px 24px 0; +} + .section-header h2, .builder-card-header h2 { margin: 0 0 2px; @@ -452,6 +467,7 @@ button { .builder-card-body { display: grid; gap: 16px; + padding: 0 24px 24px; } .proto-grid { @@ -920,6 +936,7 @@ button { } .field-inline { + width: 100%; max-width: 420px; } @@ -1096,6 +1113,10 @@ pre { .main-content { padding: 20px; } + + .builder-stack { + max-width: none; + } } @media (max-width: 820px) { @@ -1116,4 +1137,11 @@ pre { .hero-metrics { grid-template-columns: 1fr; } + + .builder-card-header, + .builder-card-body, + .page-section { + padding-left: 16px; + padding-right: 16px; + } }