Browse Source

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
dev
Константин Лебединский 2 weeks ago
parent
commit
72a5863871
  1. 56
      frontend/src/styles/cabinet-theme.css

56
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 {

Loading…
Cancel
Save