From 6cedef5d384d1b428788a7ade1c3d32ab127e97a Mon Sep 17 00:00:00 2001
From: cyprain-okeke <108260115+cyprain-okeke@users.noreply.github.com>
Date: Fri, 5 Sep 2025 22:58:04 +0530
Subject: [PATCH] [CL-641][Defect][Web] More spacing defects including
 self-host environment (#16285)

* Fix the selfhost ui issue

* Fix the text warp

* Add more space with text and button

* Push the upload file button space change

* resolve the space issue
---
 ...ation-subscription-selfhost.component.html |  7 ++--
 ...lf-hosting-license-uploader.component.html |  6 ++--
 .../shared/update-license.component.html      | 32 ++++++++++---------
 3 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/apps/web/src/app/billing/organizations/organization-subscription-selfhost.component.html b/apps/web/src/app/billing/organizations/organization-subscription-selfhost.component.html
index 471912f83a..1c823ed76c 100644
--- a/apps/web/src/app/billing/organizations/organization-subscription-selfhost.component.html
+++ b/apps/web/src/app/billing/organizations/organization-subscription-selfhost.component.html
@@ -12,7 +12,7 @@
   ></app-org-subscription-hidden>
 
   <ng-container *ngIf="subscription && firstLoaded">
-    <dl>
+    <dl class="tw-mb-2">
       <dt>{{ "billingPlan" | i18n }}</dt>
       <dd>{{ subscription.planName }}</dd>
       <ng-container *ngIf="billingSyncSetUp">
@@ -44,7 +44,7 @@
         }}
         <div
           *ngIf="subscription.hasSeparateGracePeriod && !subscription.isInTrial"
-          class="tw-text-muted"
+          class="tw-text-muted tw-break-words tw-whitespace-normal tw-max-w-fit tw-inline-block"
         >
           {{
             "selfHostGracePeriodHelp"
@@ -61,6 +61,7 @@
       href="{{ this.cloudWebVaultUrl }}"
       target="_blank"
       rel="noreferrer"
+      class="tw-mb-4"
     >
       {{ "launchCloudSubscription" | i18n }}
     </a>
@@ -93,7 +94,7 @@
           </bit-hint>
         </bit-radio-button>
         <ng-container *ngIf="updateMethod === licenseOptions.SYNC">
-          <div class="tw-mt-6">
+          <div class="tw-mt-6 tw-flex tw-gap-2">
             <button
               bitButton
               buttonType="secondary"
diff --git a/apps/web/src/app/billing/shared/self-hosting-license-uploader/self-hosting-license-uploader.component.html b/apps/web/src/app/billing/shared/self-hosting-license-uploader/self-hosting-license-uploader.component.html
index 2238c10dd4..570848119e 100644
--- a/apps/web/src/app/billing/shared/self-hosting-license-uploader/self-hosting-license-uploader.component.html
+++ b/apps/web/src/app/billing/shared/self-hosting-license-uploader/self-hosting-license-uploader.component.html
@@ -1,8 +1,10 @@
-<p bitTypography="body1">{{ "uploadLicenseFileOrg" | i18n }}</p>
+<p bitTypography="body1" class="tw-break-words tw-whitespace-normal tw-mb-8">
+  {{ "uploadLicenseFileOrg" | i18n }}
+</p>
 <form [formGroup]="form" [bitSubmit]="submit">
   <bit-form-field>
     <bit-label>{{ description | i18n }}</bit-label>
-    <div>
+    <div class="tw-my-1">
       <button bitButton type="button" buttonType="secondary" (click)="fileSelector.click()">
         {{ "chooseFile" | i18n }}
       </button>
diff --git a/apps/web/src/app/billing/shared/update-license.component.html b/apps/web/src/app/billing/shared/update-license.component.html
index ea0818389e..cc62aac898 100644
--- a/apps/web/src/app/billing/shared/update-license.component.html
+++ b/apps/web/src/app/billing/shared/update-license.component.html
@@ -1,11 +1,11 @@
 <form [formGroup]="updateLicenseForm" [bitSubmit]="submit">
   <bit-form-field>
     <bit-label *ngIf="showAutomaticSyncAndManualUpload">{{ "licenseFile" | i18n }}</bit-label>
-    <div class="tw-pb-1 tw-pt-2">
+    <div class="tw-pb-1 tw-pt-2 tw-flex tw-items-center tw-gap-3">
       <button bitButton type="button" buttonType="secondary" (click)="fileSelector.click()">
         {{ "chooseFile" | i18n }}
       </button>
-      {{ this.licenseFile ? this.licenseFile.name : ("noFileChosen" | i18n) }}
+      <span>{{ this.licenseFile ? this.licenseFile.name : ("noFileChosen" | i18n) }}</span>
     </div>
     <input
       bitInput
@@ -24,17 +24,19 @@
               : "bitwarden_organization_license.json")
     }}</bit-hint>
   </bit-form-field>
-  <button type="submit" buttonType="primary" bitButton bitFormButton>
-    {{ "submit" | i18n }}
-  </button>
-  <button
-    bitButton
-    *ngIf="showCancel"
-    bitFormButton
-    buttonType="secondary"
-    type="button"
-    [bitAction]="cancel"
-  >
-    {{ "cancel" | i18n }}
-  </button>
+  <div class="tw-flex tw-gap-2 tw-mt-4">
+    <button type="submit" buttonType="primary" bitButton bitFormButton>
+      {{ "submit" | i18n }}
+    </button>
+    <button
+      bitButton
+      *ngIf="showCancel"
+      bitFormButton
+      buttonType="secondary"
+      type="button"
+      [bitAction]="cancel"
+    >
+      {{ "cancel" | i18n }}
+    </button>
+  </div>
 </form>