From 4734cab9a6374e0b2647eadfa01aa9e83f5a1a7e Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Wed, 26 Mar 2025 17:26:05 -0400
Subject: [PATCH] [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>
---
 .../popup/settings/account-security.component.html     |  2 +-
 .../autofill/popup/settings/autofill.component.html    |  4 ++--
 .../popup/settings/notifications.component.html        |  2 +-
 .../platform/popup/layout/popup-page.component.html    |  2 +-
 .../components/options/send-options.component.html     |  2 +-
 .../send-details/send-details.component.html           |  2 +-
 .../send-list-items-container.component.html           |  2 +-
 .../additional-options-section.component.html          | 10 ++++++++--
 .../additional-options-section.component.spec.ts       |  6 ++++--
 .../additional-options-section.component.ts            |  4 +++-
 .../cipher-form/components/cipher-form.component.html  |  4 +++-
 .../custom-fields/custom-fields.component.html         |  2 +-
 .../custom-fields/custom-fields.component.ts           |  3 +++
 .../item-history/item-history-v2.component.html        |  2 +-
 14 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/apps/browser/src/auth/popup/settings/account-security.component.html b/apps/browser/src/auth/popup/settings/account-security.component.html
index 3c5fd7a6af..b8252aa6e1 100644
--- a/apps/browser/src/auth/popup/settings/account-security.component.html
+++ b/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>
diff --git a/apps/browser/src/autofill/popup/settings/autofill.component.html b/apps/browser/src/autofill/popup/settings/autofill.component.html
index 340197f6bf..c690eb3d2c 100644
--- a/apps/browser/src/autofill/popup/settings/autofill.component.html
+++ b/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>
diff --git a/apps/browser/src/autofill/popup/settings/notifications.component.html b/apps/browser/src/autofill/popup/settings/notifications.component.html
index c6446012d0..385db8c059 100644
--- a/apps/browser/src/autofill/popup/settings/notifications.component.html
+++ b/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>
diff --git a/apps/browser/src/platform/popup/layout/popup-page.component.html b/apps/browser/src/platform/popup/layout/popup-page.component.html
index 94f0846a85..2313b942a3 100644
--- a/apps/browser/src/platform/popup/layout/popup-page.component.html
+++ b/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>
diff --git a/libs/tools/send/send-ui/src/send-form/components/options/send-options.component.html b/libs/tools/send/send-ui/src/send-form/components/options/send-options.component.html
index 322fea94e3..b9edf8eebc 100644
--- a/libs/tools/send/send-ui/src/send-form/components/options/send-options.component.html
+++ b/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>
diff --git a/libs/tools/send/send-ui/src/send-form/components/send-details/send-details.component.html b/libs/tools/send/send-ui/src/send-form/components/send-details/send-details.component.html
index 06b0f1a55d..214c978ad4 100644
--- a/libs/tools/send/send-ui/src/send-form/components/send-details/send-details.component.html
+++ b/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>
diff --git a/libs/tools/send/send-ui/src/send-list-items-container/send-list-items-container.component.html b/libs/tools/send/send-ui/src/send-list-items-container/send-list-items-container.component.html
index d244be1508..4b0e597060 100644
--- a/libs/tools/send/send-ui/src/send-list-items-container/send-list-items-container.component.html
+++ b/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 }}
diff --git a/libs/vault/src/cipher-form/components/additional-options/additional-options-section.component.html b/libs/vault/src/cipher-form/components/additional-options/additional-options-section.component.html
index c00f51c8eb..e1eedb36e8 100644
--- a/libs/vault/src/cipher-form/components/additional-options/additional-options-section.component.html
+++ b/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>
diff --git a/libs/vault/src/cipher-form/components/additional-options/additional-options-section.component.spec.ts b/libs/vault/src/cipher-form/components/additional-options/additional-options-section.component.spec.ts
index 705c170933..f1c8085ae1 100644
--- a/libs/vault/src/cipher-form/components/additional-options/additional-options-section.component.spec.ts
+++ b/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;
diff --git a/libs/vault/src/cipher-form/components/additional-options/additional-options-section.component.ts b/libs/vault/src/cipher-form/components/additional-options/additional-options-section.component.ts
index 9c619ca2f8..4d72a89e4e 100644
--- a/libs/vault/src/cipher-form/components/additional-options/additional-options-section.component.ts
+++ b/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,
diff --git a/libs/vault/src/cipher-form/components/cipher-form.component.html b/libs/vault/src/cipher-form/components/cipher-form.component.html
index 2644741385..6b327486c4 100644
--- a/libs/vault/src/cipher-form/components/cipher-form.component.html
+++ b/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'">
diff --git a/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.html b/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.html
index c7c5f4a930..3bce3c5f38 100644
--- a/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.html
+++ b/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>
diff --git a/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.ts b/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.ts
index bdb96f4327..083615798b 100644
--- a/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.ts
+++ b/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([]),
   });
diff --git a/libs/vault/src/cipher-view/item-history/item-history-v2.component.html b/libs/vault/src/cipher-view/item-history/item-history-v2.component.html
index c069e36dde..9395fb34fc 100644
--- a/libs/vault/src/cipher-view/item-history/item-history-v2.component.html
+++ b/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>