[CL-550] Fix popup layout padding and adjust views with extra bottom space (#13562)

* [CL-550] Fix popup layout padding and adjust views with extra bottom space

* simplify css

* fix add/edit item page

* cr changes

* fix failing test

---------

Co-authored-by: Will Martin <contact@willmartian.com>

apps/browser/src/auth/popup/settings/account-security.component.html

@@ -95,7 +95,7 @@
       </bit-card>
     </bit-section>
 
-    <bit-section>
+    <bit-section disableMargin>
       <bit-section-header>
         <h2 bitTypography="h6">{{ "otherOptions" | i18n }}</h2>
       </bit-section-header>

apps/browser/src/autofill/popup/settings/autofill.component.html

@@ -209,7 +209,7 @@
         </bit-form-field>
       </bit-card>
     </bit-section>
-    <bit-section>
+    <bit-section [disableMargin]="!blockBrowserInjectionsByDomainEnabled">
       <bit-section-header>
         <h2 bitTypography="h6">{{ "additionalOptions" | i18n }}</h2>
       </bit-section-header>
@@ -270,7 +270,7 @@
         </bit-form-field>
       </bit-card>
     </bit-section>
-    <bit-section *ngIf="blockBrowserInjectionsByDomainEnabled">
+    <bit-section *ngIf="blockBrowserInjectionsByDomainEnabled" disableMargin>
       <bit-item>
         <a bit-item-content routerLink="/blocked-domains">{{ "blockedDomains" | i18n }}</a>
         <i slot="end" class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>

apps/browser/src/autofill/popup/settings/notifications.component.html

@@ -47,7 +47,7 @@
         </bit-form-control>
       </bit-card>
     </bit-section>
-    <bit-section>
+    <bit-section disableMargin>
       <bit-item>
         <a bit-item-content routerLink="/excluded-domains">{{ "excludedDomains" | i18n }}</a>
         <i slot="end" class="bwi bwi-angle-right row-sub-icon" aria-hidden="true"></i>

apps/browser/src/platform/popup/layout/popup-page.component.html

@@ -19,7 +19,7 @@
     [ngClass]="{ 'tw-invisible': loading }"
   >
     <div
-      class="tw-max-w-screen-sm tw-mx-auto tw-flex-1 tw-flex tw-flex-col tw-size-full"
+      class="tw-max-w-screen-sm tw-mx-auto tw-flex-1 tw-flex tw-flex-col tw-w-full"
       [ngClass]="{ 'tw-p-3 bit-compact:tw-p-2': !disablePadding }"
     >
       <ng-content></ng-content>

libs/tools/send/send-ui/src/send-form/components/options/send-options.component.html

@@ -1,4 +1,4 @@
-<bit-section [formGroup]="sendOptionsForm">
+<bit-section [formGroup]="sendOptionsForm" disableMargin>
   <bit-section-header>
     <h2 class="tw-mt-4" bitTypography="h6">{{ "additionalOptions" | i18n }}</h2>
   </bit-section-header>

libs/tools/send/send-ui/src/send-form/components/send-details/send-details.component.html

@@ -1,4 +1,4 @@
-<bit-section [formGroup]="sendDetailsForm">
+<bit-section [formGroup]="sendDetailsForm" disableMargin>
   <bit-section-header class="tw-mt-2">
     <h2 bitTypography="h6">{{ "sendDetails" | i18n }}</h2>
   </bit-section-header>

libs/tools/send/send-ui/src/send-list-items-container/send-list-items-container.component.html

@@ -1,4 +1,4 @@
-<bit-section *ngIf="sends?.length > 0">
+<bit-section *ngIf="sends?.length > 0" disableMargin>
   <bit-section-header>
     <h2 class="tw-font-bold" bitTypography="h6">
       {{ headerText }}

libs/vault/src/cipher-form/components/additional-options/additional-options-section.component.html

@@ -1,4 +1,7 @@
-<bit-section [formGroup]="additionalOptionsForm">
+<bit-section
+  [formGroup]="additionalOptionsForm"
+  [disableMargin]="disableSectionMargin && !hasCustomFields"
+>
   <bit-section-header>
     <h2 bitTypography="h6">{{ "additionalOptions" | i18n }}</h2>
   </bit-section-header>
@@ -29,4 +32,7 @@
   </bit-card>
 </bit-section>
 
-<vault-custom-fields (numberOfFieldsChange)="handleCustomFieldChange($event)"></vault-custom-fields>
+<vault-custom-fields
+  (numberOfFieldsChange)="handleCustomFieldChange($event)"
+  [disableSectionMargin]="disableSectionMargin"
+></vault-custom-fields>

libs/vault/src/cipher-form/components/additional-options/additional-options-section.component.spec.ts

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, Input } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { mock, MockProxy } from "jest-mock-extended";
 import { BehaviorSubject } from "rxjs";
@@ -18,7 +18,9 @@ import { AdditionalOptionsSectionComponent } from "./additional-options-section.
   selector: "vault-custom-fields",
   template: "",
 })
-class MockCustomFieldsComponent {}
+class MockCustomFieldsComponent {
+  @Input() disableSectionMargin: boolean;
+}
 
 describe("AdditionalOptionsSectionComponent", () => {
   let component: AdditionalOptionsSectionComponent;

libs/vault/src/cipher-form/components/additional-options/additional-options-section.component.ts

@@ -1,7 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { CommonModule } from "@angular/common";
-import { ChangeDetectorRef, Component, OnInit, ViewChild } from "@angular/core";
+import { ChangeDetectorRef, Component, Input, OnInit, ViewChild } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { FormBuilder, ReactiveFormsModule } from "@angular/forms";
 import { shareReplay } from "rxjs";
@@ -59,6 +59,8 @@ export class AdditionalOptionsSectionComponent implements OnInit {
   /** True when the form is in `partial-edit` mode */
   isPartialEdit = false;
 
+  @Input() disableSectionMargin: boolean;
+
   constructor(
     private cipherFormContainer: CipherFormContainer,
     private formBuilder: FormBuilder,

libs/vault/src/cipher-form/components/cipher-form.component.html

@@ -28,7 +28,9 @@
       [originalCipherView]="originalCipherView"
     ></vault-sshkey-section>
 
-    <vault-additional-options-section></vault-additional-options-section>
+    <vault-additional-options-section
+      [disableSectionMargin]="config.mode !== 'edit'"
+    ></vault-additional-options-section>
 
     <!-- Attachments are only available for existing ciphers -->
     <ng-container *ngIf="config.mode == 'edit'">

libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.html

@@ -1,4 +1,4 @@
-<bit-section *ngIf="hasCustomFields">
+<bit-section *ngIf="hasCustomFields" [disableMargin]="disableSectionMargin">
   <bit-section-header>
     <h2 bitTypography="h6">{{ "customFields" | i18n }}</h2>
   </bit-section-header>

libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.ts

@@ -11,6 +11,7 @@ import {
   ElementRef,
   EventEmitter,
   inject,
+  Input,
   OnInit,
   Output,
   QueryList,
@@ -94,6 +95,8 @@ export class CustomFieldsComponent implements OnInit, AfterViewInit {
 
   @ViewChildren("customFieldRow") customFieldRows: QueryList<ElementRef<HTMLDivElement>>;
 
+  @Input() disableSectionMargin: boolean;
+
   customFieldsForm = this.formBuilder.group({
     fields: new FormArray([]),
   });

libs/vault/src/cipher-view/item-history/item-history-v2.component.html

@@ -1,4 +1,4 @@
-<bit-section>
+<bit-section disableMargin>
   <bit-section-header>
     <h2 bitTypography="h6">{{ "itemHistory" | i18n }}</h2>
   </bit-section-header>