fix(user-profile): fixed ellipsis not showing on xl profile

Author: opaduchak

package.json

@@ -20,7 +20,7 @@
  "prepare": "husky",
  "start": "ng serve",
  "start:docker": "npm run check:config && ng serve --host 0.0.0.0 --port 4200 --poll 2000 --configuration development",
- "start:docker:local": "npm run check:config && ng serve --host 0.0.0.0 --port 4200 --poll 2000 --configuration docker",
+ "start:docker:local": "ng serve --host 0.0.0.0 --port 4200 --poll 2000 --configuration docker",
  "start:test": "ng serve --configuration test-osf",
  "start:test:future": "ng serve --configuration test",
  "test": "jest",

src/app/features/profile/components/profile-information/profile-information.component.html

@@ -21,8 +21,8 @@ <h1>{{ currentUser()?.fullName }}</h1>
  </p>
  </div>
 
- <div class="flex flex-column gap-4 xl:align-items-end">
- <div class="flex flex-column gap-3 md:flex-row xl:gap-4">
+ <div class="flex flex-column gap-4 xl:align-items-end xl:flex-1 min-w-0">
+ <div class="flex flex-column gap-3 md:flex-row xl:gap-4 w-full">
  @if (currentUser()?.social?.orcid) {
  <div class="flex flex-row align-items-center gap-2">
  <img ngSrc="assets/icons/colored/orcid.svg" width="16" height="16" alt="orcid" />
@@ -39,9 +39,9 @@ <h1>{{ currentUser()?.fullName }}</h1>
  </div>
 
  @if (isEmploymentAndEducationVisible()) {
- <div class="flex flex-column gap-3 md:flex-row xl:gap-4 white-space-nowrap">
+ <div class="flex flex-column gap-3 md:flex-row xl:gap-4 w-full">
  @if (currentUser()?.education?.length) {
- <div class="flex flex-row align-items-center gap-2 overflow-hidden">
+ <div class="flex flex-row align-items-center gap-2 flex-1 min-w-0">
  <i class="fas fa-landmark"></i>
  <h3 class="font-bold text-overflow-ellipsis overflow-hidden white-space-nowrap">
  {{ currentUser()?.education?.[0]?.institution }}