Элементы списка матов на экранах малого размера

Question

У меня есть экран, на котором я показываю данные в карточках через angular список материалов

Вот мой код

<div bsModal #modal="bs-modal" class="modal fade right" id="exampleModalPreview" tabindex="-1" role="dialog"
[config]="{ backdrop: 'static' }" aria-labelledby="exampleModalPreviewLabel" aria-hidden="true">
<div class="modal-dialog-full-width modal-dialog momodel modal-fluid" role="document">
    <div class="modal-content-full-width modal-content ">
        <div class="modal-header-full-width modal-header text-center">
            <h1 class="modal-title w-100" style="font-size: 32px !important;">
                <b>{{'ThanksForJoiningUs' | localize}}</b></h1>
            <button type="button" class="close " (click)="close()" data-dismiss="modal" aria-label="Close">
                <span style="font-size: 2.3em;" aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div>
                <h4 class="section-heading text-center wow fadeIn" style="margin-bottom: 20px;">
                    {{'GetYourServices' | localize}}</h4>
            </div>

            <div class="col-md-8 subscribe-form">
                <h5 style="padding-top: 30px;font-size: 20px;">{{'ChooseSubscription' | localize}}</h5>
                <div>
                    <mat-tab-group mat-align-tabs="center" class="remove-border-bottom">
                        <mat-tab label="MONTLY" style="color: white !important">
                            <div class="row card-row">
                                <div *ngFor="let item of subscriptions" class="col-md-4"
                                    style="margin-bottom: 40px;">
                                    <div class="card" style="border-radius: 7px;height: 425px;">
                                        <h4 class="header-subsc-card"><b>{{item.name}}</b></h4>
                                        <h5 class="header-subsc-card">{{item.description}}</h5>
                                        <h4 class="header-subsc-card" style="margin-top: 30px;"><b
                                                style="font-size: 24px;">£
                                                {{item.priceMonthly}}</b> /
                                            {{'month' | localize}}</h4>
                                        <button class="btn-rent-default subscribe-button"
                                            (click)="pay(item.priceMonthly, item.name, item.description)">{{'Subscribe' | localize}}</button>
                                        <mat-list>
                                            <mat-list-item *ngFor="let option of item.pm101SubscriptionOptions"
                                                role="listitem">
                                                <mat-icon mat-list-icon class="green-icon">check</mat-icon>
                                                {{option.value}} {{option.name}}
                                            </mat-list-item>
                                        </mat-list>
                                        <div class="card-badge" *ngIf="item.id === 2">{{'BestChoice' | localize}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </mat-tab>
                        <mat-tab label="YEARLY" style="color: white !important">
                            <div class="row card-row">
                                <div *ngFor="let item of subscriptions" class="col-md-4"
                                    style="margin-bottom: 40px;">
                                    <div class="card" style="border-radius: 7px;height: 425px;">
                                        <h4 class="header-subsc-card"><b>{{item.name}}</b></h4>
                                        <h5 class="header-subsc-card">{{item.description}}</h5>
                                        <h4 class="header-subsc-card" style="margin-top: 30px;"><b
                                                style="font-size: 24px;">£
                                                {{item.priceYearly}}</b> /
                                            {{'year' | localize}}</h4>
                                        <button class="btn-rent-default subscribe-button"
                                            (click)="pay(item.priceYearly, item.name, item.description)">{{'Subscribe' | localize}}</button>

                                        <mat-list>
                                            <mat-list-item *ngFor="let option of item.pm101SubscriptionOptions"
                                                role="listitem">
                                                <mat-icon mat-list-icon class="green-icon">check</mat-icon>
                                                {{option.value}} {{option.name}}
                                            </mat-list-item>
                                        </mat-list>
                                        <div class="card-badge" *ngIf="item.id === 2">{{'BestChoice' | localize}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </mat-tab>
                    </mat-tab-group>
                    <button class="btn-rent-default-transparent back-button"
                        (click)="close()">{{'Back' | localize}}</button>
                </div>
            </div>
            <h5 style="text-align: center;margin-top: 15px;">{{'IfYouNeedHelp' | localize}}
                <a style="color:#7691de">{{'HelpCenter' | localize}}</a></h5>
        </div>

    </div>
</div>

Выглядит хорошо, когда я его смотрю на большом экране

Но на меньшем экране это выглядит ужасно

Как я можно решить эту проблему?

Answer 1

Это в основном происходит из-за фиксированных height (48px) в элементах списка материалов .mat-list-item, для которых вам нужно установить height в auto

.mat-list-base .mat-list-item{
    height: auto !important;
}