fix(preprint): fixed some styles

src/app/features/files/pages/files/files.component.ts

@@ -6,7 +6,6 @@ import { TreeDragDropService } from 'primeng/api';
 import { Button } from 'primeng/button';
 import { Dialog } from 'primeng/dialog';
 import { DialogService } from 'primeng/dynamicdialog';
-import { FloatLabel } from 'primeng/floatlabel';
 import { Select } from 'primeng/select';
 import { TableModule } from 'primeng/table';
 
@@ -85,7 +84,6 @@ import { FilesSelectors } from '../../store';
     Button,
     Dialog,
     FilesTreeComponent,
-    FloatLabel,
     FormSelectComponent,
     FormsModule,
     GoogleFilePickerComponent,

src/app/features/preprints/components/preprint-details/additional-info/additional-info.component.html

@@ -23,7 +23,7 @@ <h3>{{ 'preprints.details.originalPublicationDate' | translate }}</h3>
         <section class="flex flex-column gap-2">
           <h3>{{ 'preprints.details.publicationDoi' | translate }}</h3>
 
-          <a [href]="preprint()?.articleDoiLink">
+          <a class="font-bold word-break-word" [href]="preprint()?.articleDoiLink">
             {{ preprint()?.articleDoiLink }}
           </a>
         </section>

src/app/features/preprints/components/preprint-details/general-information/general-information.component.html

@@ -14,7 +14,7 @@ <h3>{{ 'preprints.preprintStepper.common.labels.abstract' | translate }}</h3>
       @if (preprintValue.nodeId) {
         <section class="flex flex-column gap-2">
           <h3>{{ 'preprints.details.supplementalMaterials' | translate }}</h3>
-          <a [href]="nodeLink()" class="flex gap-1">
+          <a class="font-bold flex gap-1" [href]="nodeLink()">
             {{ nodeLink() }}
             <osf-icon iconClass="fa fa-external-link-alt" />
           </a>

src/app/features/preprints/components/preprint-details/preprint-doi-section/preprint-doi-section.component.html

@@ -15,7 +15,9 @@ <h3>{{ 'preprints.details.doi.title' | translate: { documentType: preprintProvid
   />
   @if (preprintValue.preprintDoiLink) {
     @if (preprintValue.preprintDoiCreated) {
-      <a [href]="preprintValue.preprintDoiLink">{{ preprintValue.preprintDoiLink }}</a>
+      <a class="font-bold word-break-word" [href]="preprintValue.preprintDoiLink">
+        {{ preprintValue.preprintDoiLink }}
+      </a>
     } @else {
       <p>{{ preprintValue.preprintDoiLink }}</p>
       <p>{{ 'preprints.details.doi.pendingDoiMinted' | translate }}</p>

src/app/features/preprints/components/preprint-details/preprint-file-section/preprint-file-section.component.html

@@ -23,16 +23,16 @@
     @if (fileVersions().length) {
       @let fileVersionsValue = fileVersions();
 
-      <div class="flex flex-row align-items-center">
+      <div class="flex flex-column align-items-start sm:flex-row sm:justify-content-between sm:align-items-center">
         <p>{{ fileVersionsValue[0].name }}</p>
-        <p class="m-auto">{{ 'preprints.details.file.version' | translate: { version: fileVersionsValue[0].id } }}</p>
+        <p>{{ 'preprints.details.file.version' | translate: { version: fileVersionsValue[0].id } }}</p>
         <p-button
           severity="info"
           [label]="'preprints.details.file.downloadPreviousVersion' | translate"
           (click)="versionsMenu.toggle($event)"
         />
 
-        <p-menu #versionsMenu [model]="versionMenuItems()" appendTo="body" popup />
+        <p-menu #versionsMenu [model]="versionMenuItems()" appendTo="body" popup class="hidden" />
       </div>
     }
 

src/app/features/preprints/pages/preprint-details/preprint-details.component.html

@@ -8,7 +8,7 @@
         </div>
       } @else {
         <div class="flex flex-column gap-3 md:flex-row">
-          <img alt="Provider Logo" height="36" [src]="preprintProvider()!.brand.heroLogoImageUrl" />
+          <img class="fit-contain" alt="Provider Logo" height="36" [src]="preprintProvider()!.brand.heroLogoImageUrl" />
           <h1>{{ preprint()!.title }}</h1>
         </div>
       }

src/styles/_common.scss

@@ -80,6 +80,10 @@
   white-space: nowrap;
 }
 
+.word-break-word {
+  word-break: break-word;
+}
+
 // ------------------------- Universal custom hover state -------------------------
 
 .custom-dark-hover:hover:not(:disabled) {