fix(bugs): fixed bugs

src/app/core/components/root/root.component.html

@@ -1,31 +1,24 @@
-@if (isWeb()) {
-  <div class="layout-desktop">
+<div class="layout" [class.layout-desktop]="isWeb()" [class.layout-tablet]="!isWeb()">
+  @if (isWeb()) {
     <osf-sidenav></osf-sidenav>
+  }
 
-    <div class="content-wrapper" osfScrollTopOnRouteChange>
-      <osf-maintenance-banner></osf-maintenance-banner>
-      <osf-header></osf-header>
-
-      <router-outlet />
+  <div class="content-wrapper" osfScrollTopOnRouteChange>
+    <osf-maintenance-banner></osf-maintenance-banner>
 
-      <osf-footer></osf-footer>
-    </div>
-  </div>
-} @else {
-  <div class="layout-tablet">
-    <div class="content-wrapper" osfScrollTopOnRouteChange>
-      <osf-maintenance-banner></osf-maintenance-banner>
+    @if (isWeb()) {
+      <osf-header></osf-header>
+    } @else {
       <osf-topnav></osf-topnav>
-
       @if (isMedium()) {
         <osf-breadcrumb></osf-breadcrumb>
       }
+    }
 
-      <router-outlet />
+    <router-outlet />
 
-      <osf-footer></osf-footer>
-    </div>
+    <osf-footer></osf-footer>
   </div>
-}
+</div>
 
 <p-confirm-dialog id="dialog" styleClass="w-full md:w-6 xl:w-5" [header]="'common.dialogs.confirmation' | translate" />

src/app/core/components/root/root.component.scss

@@ -44,3 +44,43 @@
     }
   }
 }
+
+.layout {
+  display: flex;
+  flex: 1;
+  max-width: 100vw;
+
+  .content-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow-y: auto;
+    background-color: var(--bg-blue-3);
+  }
+}
+
+.layout.layout-desktop {
+  background-color: var(--dark-blue-1);
+
+  .content-wrapper {
+    position: relative;
+    border-radius: mix.rem(12px);
+    margin: mix.rem(6px);
+  }
+}
+
+.layout.layout-tablet {
+  @include mix.flex-center;
+
+  .content-wrapper {
+    @include mix.flex-column;
+    width: 100%;
+    height: 100%;
+
+    .content {
+      position: relative;
+      @include mix.flex-column;
+      flex: 1;
+    }
+  }
+}

src/app/features/admin-institutions/admin-institutions.component.html

@@ -1,4 +1,4 @@
-<section class="flex flex-column xl:mt-6">
+<section class="flex flex-column flex-1 xl:mt-6">
   @if (isInstitutionLoading()) {
     <div class="h-screen flex flex-column align-items-center">
       <osf-loading-spinner />
@@ -28,15 +28,15 @@ <h1>{{ institution().name }}</h1>
       />
     </div>
 
-    <p-tabs [value]="selectedTab" (valueChange)="onTabChange($event)" class="flex-1 px-3 hidden md:px-5 md:inline">
+    <p-tabs [value]="selectedTab" (valueChange)="onTabChange($event)" class="px-3 hidden md:px-5 md:inline">
       <p-tablist>
         @for (item of resourceTabOptions; track $index) {
           <p-tab [value]="item.value">{{ item.label | translate }}</p-tab>
         }
       </p-tablist>
     </p-tabs>
 
-    <section class="bg-white p-3 md:p-4">
+    <section class="flex flex-column flex-1 bg-white p-3 md:p-4">
       <router-outlet></router-outlet>
     </section>
   }

src/app/features/admin-institutions/components/admin-table/admin-table.component.html

@@ -1,4 +1,4 @@
-<div class="flex justify-content-between align-items-center py-2 px-0 md:py-3 md:px-3">
+<div class="flex justify-content-between align-items-center py-3 px-0">
   <div class="hidden md:block">
     <ng-content select="[slot=amount]"></ng-content>
   </div>
@@ -19,7 +19,7 @@
     </ng-template>
   </p-menu>
 
-  <div class="flex align-items-center gap-2 flex-column w-full md:flex-row md:w-fit">
+  <div class="flex align-items-center gap-2 w-full md:flex-row md:w-fit">
     <ng-content select="[slot=otherFilters]"></ng-content>
 
     <div class="flex align-items-center gap-2 justify-content-between w-full md:justify-content-start md:w-fit">

src/app/features/admin-institutions/components/admin-table/admin-table.component.scss

@@ -1,7 +1,3 @@
-.p-06 {
-  padding: 0.625rem;
-}
-
 .hover-group {
   .icon-button {
     opacity: 0;

src/app/features/admin-institutions/pages/institutions-summary/institutions-summary.component.html

@@ -1,5 +1,5 @@
 @if (summaryMetricsLoading()) {
-  <div class="flex-1 mt-4 md:mt-8 lg:pt-5">
+  <div class="flex-1">
     <osf-loading-spinner />
   </div>
 } @else {

src/app/features/admin-institutions/pages/institutions-summary/institutions-summary.component.scss

@@ -1,5 +1,11 @@
 @use "styles/variables" as var;
 
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
 .width-25 {
   width: calc(25% - 1.5rem);
 

src/app/features/files/models/get-resource-short-info-response.model.ts

@@ -1,5 +1,4 @@
-import { ApiData, JsonApiResponse } from '@osf/shared/models';
-import { IdentifiersJsonApiResponse } from '@shared/models/identifiers/identifier-json-api.model';
+import { ApiData, IdentifiersJsonApiResponse, JsonApiResponse } from '@osf/shared/models';
 
 export type GetResourceShortInfoResponse = JsonApiResponse<
   ApiData<

src/app/features/files/models/get-short-info-response.model.ts

@@ -1,5 +1,4 @@
-import { ApiData, JsonApiResponse } from '@shared/models';
-import { IdentifiersJsonApiResponse } from '@shared/models/identifiers/identifier-json-api.model';
+import { ApiData, IdentifiersJsonApiResponse, JsonApiResponse } from '@shared/models';
 
 export type GetShortInfoResponse = JsonApiResponse<
   ApiData<

src/app/features/files/models/index.ts

@@ -3,7 +3,6 @@ export * from './file-custom-metadata.model';
 export * from './file-revisions.model';
 export * from './file-target.model';
 export * from './files-metadata-fields.model';
-export * from './get-contributors-response.model';
 export * from './get-custom-metadata-response.model';
 export * from './get-file-metadata-response.model';
 export * from './get-file-revisions-response.model';

src/app/features/files/pages/file-detail/file-detail.component.ts

@@ -9,6 +9,7 @@ import { Tab, TabList, Tabs } from 'primeng/tabs';
 
 import { switchMap } from 'rxjs';
 
+import { Clipboard } from '@angular/cdk/clipboard';
 import { DatePipe } from '@angular/common';
 import {
   ChangeDetectionStrategy,
@@ -97,9 +98,12 @@ export class FileDetailComponent {
   readonly sanitizer = inject(DomSanitizer);
   readonly toastService = inject(ToastService);
   readonly customConfirmationService = inject(CustomConfirmationService);
+
   private readonly metaTags = inject(MetaTagsService);
   private readonly datePipe = inject(DatePipe);
   private readonly translateService = inject(TranslateService);
+  private readonly clipboard = inject(Clipboard);
+
   readonly dataciteService = inject(DataciteService);
 
   private readonly actions = createDispatchMap({
@@ -267,14 +271,8 @@ export class FileDetailComponent {
   }
 
   copyToClipboard(embedHtml: string): void {
-    navigator.clipboard
-      .writeText(embedHtml)
-      .then(() => {
-        this.toastService.showSuccess('files.detail.toast.copiedToClipboard');
-      })
-      .catch((err) => {
-        this.toastService.showError(err.message);
-      });
+    this.clipboard.copy(embedHtml);
+    this.toastService.showSuccess('files.toast.copiedToClipboard');
   }
 
   deleteEntry(link: string): void {

src/app/features/files/store/index.ts

@@ -1,3 +1,4 @@
 export * from './files.actions';
+export * from './files.model';
 export * from './files.selectors';
 export * from './files.state';

src/app/features/institutions/institutions.component.scss

@@ -1,3 +1,5 @@
 :host {
+  display: flex;
+  flex-direction: column;
   flex: 1;
 }

src/app/features/institutions/pages/institutions-search/institutions-search.component.html

@@ -1,4 +1,4 @@
-<section class="flex flex-column xl:mt-6">
+<section class="flex flex-column flex-1 xl:mt-6">
   @if (isInstitutionLoading()) {
     <div class="flex-1 mt-4 md:mt-8 lg:pt-5">
       <osf-loading-spinner />

src/app/features/metadata/dialogs/resource-tooltip-info/resource-tooltip-info.component.html

@@ -7,11 +7,15 @@
   </p>
   <p>
     {{ 'project.metadata.resourceInformation.tooltipDialog.dataTypeLink' | translate }}
-    <a href="https://support.datacite.org/v1.3/docs/what-are-the-resource-types-for-datacite-dois" target="_blank">
+    <a
+      class="font-bold"
+      href="https://support.datacite.org/docs/what-are-the-resource-types-for-datacite-dois"
+      target="_blank"
+    >
       {{ 'project.metadata.resourceInformation.tooltipDialog.dataTypeLink' | translate }}.
     </a>
     {{ 'project.metadata.resourceInformation.tooltipDialog.endText' | translate }}
-    <a href="https://help.osf.io/article/570-resource-types-in-osf" target="_blank">
+    <a class="font-bold" href="https://help.osf.io/article/570-resource-types-in-osf" target="_blank">
       {{ 'project.metadata.resourceInformation.tooltipDialog.helpLink' | translate }}.
     </a>
   </p>

src/app/features/metadata/metadata.component.html

@@ -2,6 +2,7 @@
   <osf-sub-header
     [showButton]="true"
     [buttonLabel]="'project.metadata.addCommunityMetadataRecord.title' | translate"
+    [isButtonDisabled]="isLoading()"
     (buttonClick)="openAddRecord()"
     [title]="'project.overview.metadata.title' | translate"
   />

src/app/features/metadata/metadata.component.scss

@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}

src/app/features/metadata/metadata.component.ts

@@ -287,7 +287,7 @@ export class MetadataComponent implements OnInit {
         .subscribe({
           next: () => {
             this.cedarFormReadonly.set(true);
-            this.toastService.showSuccess('CEDAR record updated successfully');
+            this.toastService.showSuccess(this.translateService.instant('files.detail.toast.cedarUpdated'));
             this.actions.getCedarRecords(this.resourceId, this.resourceType());
           },
         });

src/app/features/moderation/pages/my-preprint-reviewing/my-preprint-reviewing.component.html

@@ -1,4 +1,4 @@
-<section>
+<section class="flex flex-column flex-1">
   <osf-sub-header [title]="'navigation.preprintsSubRoutes.myReviewing' | translate" />
 
   <div class="flex flex-column gap-3 bg-white p-3 flex-1 md:p-5 xl:flex-row xl:p-4">

src/app/features/moderation/pages/my-preprint-reviewing/my-preprint-reviewing.component.scss

@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}

src/app/features/project/addons/components/connect-configured-addon/connect-configured-addon.component.ts

@@ -14,7 +14,7 @@ import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 import { OperationNames } from '@osf/features/project/addons/enums';
-import { AddonConfigMap } from '@osf/features/project/addons/utils';
+import { AddonConfigMap } from '@osf/features/project/addons/models';
 import { SubHeaderComponent } from '@osf/shared/components';
 import { AddonType, ProjectAddonsStepperValue } from '@osf/shared/enums';
 import { getAddonTypeString } from '@osf/shared/helpers';

src/app/features/project/addons/models/addon-config-map.type.ts

@@ -0,0 +1,3 @@
+import { AddonConfigActions } from '.';
+
+export type AddonConfigMap = Record<string, AddonConfigActions>;

src/app/features/project/addons/models/index.ts

@@ -1 +1,2 @@
 export * from './addon-config-actions.model';
+export * from './addon-config-map.type';

src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.html

@@ -11,13 +11,13 @@
   <hr class="break-line" />
 
   <div class="flex column-gap-2">
-    <p-checkbox variant="filled" binary="true" [(ngModel)]="anonymous"></p-checkbox>
-    <p>
+    <p-checkbox variant="filled" inputId="anonymous" binary="true" [(ngModel)]="anonymous"></p-checkbox>
+    <label class="cursor-pointer" for="anonymous">
       {{ 'myProjects.settings.anonymizeContributorList' | translate }}
       <span class="font-italic">
         {{ 'myProjects.settings.ensureNoInformation' | translate }}
       </span>
-    </p>
+    </label>
   </div>
 
   <hr class="break-line" />

src/app/features/project/contributors/contributors.component.html

@@ -1,6 +1,6 @@
 <h1 class="py-5 px-3 md:px-5 xl:px-4">{{ 'navigation.contributors' | translate }}</h1>
 
-<section class="contributors flex flex-column align-items-baseline w-full p-3 pt-4 md:px-5 xl:px-4">
+<section class="contributors flex flex-column align-items-baseline flex-1 w-full p-3 pt-4 md:px-5 xl:px-4">
   @if (isCurrentUserAdminContributor()) {
     <p-button
       [label]="'project.contributors.addContributor' | translate"

src/app/features/project/contributors/contributors.component.scss

@@ -1,16 +1,20 @@
-@use "styles/mixins" as mix;
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
 
 .contributors {
   background-color: var(--white);
-  padding: mix.rem(24px) mix.rem(16px) mix.rem(16px);
-  row-gap: mix.rem(24px);
+  padding: 1.5rem 1rem 1.5rem 1rem;
+  row-gap: 1.5rem;
 
   .filters-container {
-    gap: mix.rem(12px);
+    gap: 0.75rem;
     width: 100%;
 
     .contributors-filter-container {
-      gap: mix.rem(12px);
+      gap: 0.75rem;
     }
   }
 }

src/app/features/project/settings/components/settings-access-requests-card/settings-access-requests-card.component.html

@@ -6,11 +6,11 @@ <h2 class="pb-4">{{ 'myProjects.settings.accessRequests' | translate }}</h2>
       [binary]="true"
       [ngModel]="accessRequest()"
       (ngModelChange)="accessRequestChange.emit($event)"
-      id="accessRequest"
+      inputId="accessRequest"
       name="ongoing"
     ></p-checkbox>
 
-    <label class="input-label ml-2" for="accessRequest">
+    <label class="input-label ml-2 cursor-pointer" for="accessRequest">
       {{ 'myProjects.settings.accessRequestsText' | translate }}
     </label>
   </div>

src/app/features/project/settings/components/settings-wiki-card/settings-wiki-card.component.html

@@ -5,8 +5,8 @@ <h2 class="pb-4">{{ 'myProjects.settings.wiki' | translate }}</h2>
     <p-checkbox
       [binary]="true"
       [ngModel]="wikiEnabled()"
-      (ngModelChange)="wikiChangeEmit.emit(wikiEnabled())"
-      id="wiki"
+      (ngModelChange)="wikiChangeEmit.emit($event)"
+      inputId="wiki"
       name="ongoing"
     ></p-checkbox>