Behavior of Angular component tags not taking full width

For simplicity, I have 2 components: <app-transactions-page> and <app-overview-page>. From their name, both are supposed to take up the full width the page. The <router-outlet> leads to one of those pages, and there is a major difference in their width.

Overview Page takes full 100% width of the page which is as expected and as desired. Transactions page does not take up the full width instead I have to manually do <app-transactions-page class="w-100"> where w-100 is just width: 100%. The following is my code:

Overview Component HTML:

<div class="flex my-400 mx-500" [ngClass]="{'mx-200 my-300': isMobile(), 'tablet': isTablet(), 'desktop': isDesktop()}">
<!-- children... -->
</div>


Overview Component CSS:

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


Transactions Component HTML:

<div class="container mx-200">
<!-- children... -->
</div>


Transactions Component CSS:

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


Now in the app component (the container component for both), it looks like this:


<div class="position-relative app-container">

<div class="position-relative" [ngClass]="{'layout-desktop': isDesktop(), 'brightness': !modalOn}">
<router-outlet></router-outlet>
<app-navigation></app-navigation>
</div>


</div>


.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%;

}


The question is how can I make it so that app-transactions-page takes the full width of the screen without manually setting w-100 just like we did in app-overview?

By any chance does this have to do with gap: (fixed number) px and fixed number widths ? But most of my widths is width: 100%.

Any explanation would be appreciated.

Continue reading...