[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>
2025-12-10 05:13:29 +00:00 · 2025-03-26 17:26:05 -04:00
parent 6d2231d1b2
commit 4734cab9a6
14 changed files with 31 additions and 16 deletions
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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 }}
--- 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>
--- 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;
--- 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,
--- 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'">
--- 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>
--- 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([]),
  });
--- 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>