CSS con material angular

Question

Soy un principiante en angular. Lo que tengo actualmente es un contenedor de navegación lateral con el contenido de una barra de herramientas de tapete. Ahora, mi pregunta es, como puede ver, cuando se ve con un escritorio de tamaño completo, el color de fondo de la barra de herramientas se estira y llena todo el ancho, mientras que cuando se ve con un teléfono, el color de fondo no se llena por completo dejando alguna brecha que no es agradable a la vista.

He intentado configurar el ancho del contenido de mat sidenav al 100% pensando que ocuparía todo el espacio del ancho

Para más información, este es el html.

<mat-sidenav-container class="sidenav-container">
    <mat-sidenav #drawer
                 class="sidenav"
                 fixedInViewport
                 [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
                 [opened]="false">
        <mat-toolbar>
            <button mat-button
                    (click)="drawer.close()">
                <mat-icon>close</mat-icon>
            </button>
        </mat-toolbar>
        <mat-nav-list>
            <a mat-list-item
               routerLink="/"
               (click)="drawer.close()">Home</a>
            <a mat-list-item
               routerLink="/products"
               (click)="drawer.close()">Products</a>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <mat-toolbar>
            <button type="button"
                    aria-label="Toggle Sidenav"
                    mat-icon-button
                    (click)="drawer.toggle()">
                <mat-icon aria-label="Side nav toggle Icon">menu</mat-icon>
            </button>
            <span class="logo"
                  routerLink="/">
                <img class="ww-logo"
                     src="assets/images/WWtrans.png" />
            </span>
            <div>
                <button mat-button
                        class="button">
                    <mat-icon aria-label="Search for a product"
                              svgIcon="search"></mat-icon>
                </button>
                <button mat-button
                        class="button">
                    <mat-icon aria-label="Login if the user hasn't logged in yet"
                              svgIcon="login"></mat-icon>
                </button>
                <button mat-button
                        class="button">
                    <mat-icon aria-label="Show what's inside the cart"
                              svgIcon="shopping-cart"></mat-icon>
                </button>
            </div>
        </mat-toolbar>
    </mat-sidenav-content>
</mat-sidenav-container>

y aquí está el css

.logo {
    display: flex;
    margin: auto auto;
    outline: none;
    align-self: center;
    justify-content: center;
    align-self: center;
    min-width: 100px;
    max-width: 100px;

    .ww-logo {
        width: 60%;
        cursor: pointer;
    }
}

.button {
    border: 1px solid red;
    width: 10px;
}

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

mat-sidenav-content {
    width: 100%;
}

Gracias por cualquier ayuda de antemano.

Answer 1

Parece que tiene un problema con sus mat-toolbarelementos que desbordan su espacio horizontal. Es posible que pueda hacer algunos ajustes en el espacio que ocupa su logotipo.

Además, veo que en su .buttonclase ha agregado, width: 10px;sin embargo, parece que esto no se está aplicando. Una razón de esto es que mat-buttonviene con un estilo que especifica min-width: 64px;que es posible que deba anular si desea que sus botones reduzcan su tamaño.

Si el enfoque anterior funciona, es posible que también desee ajustar el relleno de sus botones. Lo siguiente puede ser útil, pero no pude probarlo:

.button {
    border: 1px solid red;
    min-width: 32px !important;
    padding: 2px !important;
}