[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

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"

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,6 +24,7 @@
               : "bitwarden_organization_license.json")
     }}</bit-hint>
   </bit-form-field>
+  <div class="tw-flex tw-gap-2 tw-mt-4">
     <button type="submit" buttonType="primary" bitButton bitFormButton>
       {{ "submit" | i18n }}
     </button>
@@ -37,4 +38,5 @@
     >
       {{ "cancel" | i18n }}
     </button>
+  </div>
 </form>