fix(mobile): version card height, assign list, header safe-area
- version cards: flex-grow 0 for main in column layout (no empty vertical gap) - test detail: slightly larger gaps between accordion bricks; more bottom padding for fixed footer - header: respect safe-area insets for top and sides (logout away from screen edge) - assign: compact toolbar inputs on narrow screens; taller scroll area; row borders a bit stronger - assign rows: center checkbox with text; clamp meta to 3 lines with ellipsis; checkbox size + accent-color Made-with: Cursor
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user