Поведение тегов компонентов Angular, не занимающих полную ширину ⇐ CSS

[Anonymous]

Для простоты у меня есть два компонента: и . Судя по названию, оба должны занимать всю ширину страницы. ведет на одну из этих страниц, и существует большая разница в их ширине.
Страница обзора занимает полную 100% ширину страницы, что как ожидалось и как хотелось. Страница транзакций не занимает всю ширину, вместо этого мне приходится вручную делать где w-100 — это просто ширина: 100%. Ниже приведен мой код:
Обзор компонента HTML:

Код: Выделить всё

Обзор CSS компонента:

Код: Выделить всё

.flex {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 32px;
}

HTML-компонент транзакций:

Код: Выделить всё

CSS компонента транзакций:

Код: Выделить всё

.container {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 32px;
width: 100%; /* Trying to force it to take the full width */
}

Теперь в компоненте приложения (компоненте-контейнере для обоих) это выглядит так:

Код: Выделить всё

Код: Выделить всё

.app-container {
width: 100%;
height: 100%;
}

.brightness {
background: rgba(0, 0, 0, 0.50);
filter: brightness(-50%);
}

.brightness2 {
filter: brightness(100%);
}
.layout-desktop {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
width: 100%;

}

Вопрос в том, как я могу сделать так, чтобы страница app-transactions-page занимала всю ширину экрана без ручной настройки w-100, как мы это было сделано в обзоре приложения?
Случайно, это не связано с пробелом: (фиксированное число) пикселей и шириной фиксированного числа? Но большая часть моей ширины равна 100%.
Буду благодарен за любые объяснения.

Подробнее здесь: https://stackoverflow.com/questions/793 ... full-width