diff --git a/frontend/src/styles/cabinet-theme.css b/frontend/src/styles/cabinet-theme.css index dbf9e9e..7107f48 100644 --- a/frontend/src/styles/cabinet-theme.css +++ b/frontend/src/styles/cabinet-theme.css @@ -300,7 +300,10 @@ code, .cabinet-header__inner { max-width: var(--max-content); margin: 0 auto; - padding: 0.75rem 1.25rem; + padding-top: max(0.75rem, env(safe-area-inset-top, 0px)); + padding-bottom: 0.75rem; + padding-left: max(1.25rem, env(safe-area-inset-left, 0px) + 0.5rem); + padding-right: max(1.25rem, env(safe-area-inset-right, 0px) + 0.5rem); display: flex; align-items: center; justify-content: space-between; @@ -574,6 +577,11 @@ code, margin-bottom: 1.1rem; } +/* Чуть больше воздуха между аккордеонами на карточке теста */ +.test-detail-page > .cabinet-brick { + margin-bottom: 1.35rem; +} + .cabinet-brick--hero { padding: 0.1rem 0 0.2rem; border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent); @@ -651,6 +659,19 @@ code, flex: 1 1 200px; } +/* Назначение: компактнее поля на мобилке; 16px — без авто-зума iOS в поле */ +@media (max-width: 640px) { + .assign-toolbar { + gap: 0.4rem; + } + + .assign-toolbar .form-input { + padding: 8px 12px; + font-size: 16px; + line-height: 1.3; + } +} + .assign-list { max-height: min(40vh, 18rem); min-height: 0; @@ -661,13 +682,28 @@ code, -webkit-overflow-scrolling: touch; } +/* Чуть выше область прокрутки — под панель инструмента теста и fixed-футер */ +@media (max-width: 640px) { + .assign-list { + max-height: min(52dvh, 24rem); + } +} + .assign-row { display: flex; gap: 0.5rem; padding: 0.65rem 0.75rem; - border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent); + border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 40%, transparent); cursor: pointer; - align-items: flex-start; + align-items: center; +} + +.assign-row input[type='checkbox'] { + flex-shrink: 0; + width: 1.125rem; + height: 1.125rem; + margin: 0; + accent-color: var(--primary); } .assign-row:last-child { @@ -704,6 +740,12 @@ code, font-size: 0.8rem; color: var(--secondary); line-height: 1.35; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + overflow: hidden; + word-break: break-word; + overflow-wrap: anywhere; } .create-row { @@ -811,6 +853,7 @@ code, .version-card-list__item { margin: 0; + min-height: 0; } .version-card-list__row { @@ -844,6 +887,11 @@ code, align-items: stretch; } + /* В column flex `flex-grow: 1` на .main тянет блок по вертикали — лишнее пустое место */ + .version-card-list__main { + flex: 0 1 auto; + } + .version-card-list__action { width: 100%; align-self: stretch; @@ -1060,7 +1108,7 @@ code, @media (max-width: 640px) { .test-detail-page--with-fixed-actions { - padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px)); + padding-bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px)); } .test-detail-page--with-fixed-actions .editor-actions-flow {