[CL-641][Defect][Web] More spacing defects including self-host environment (bitwarden#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

Author: cyprain-okeke

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 @@ <h2 class="tw-mt-5">
           </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"

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>

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>