Fix(ang-767): Toggle project publicity dialog (#463)

* fix(ang-767): fixed toggle project publicity dialog

* fix(ang-767): changed breakpoint

Author: rnastyuk

src/app/features/project/overview/components/overview-toolbar/overview-toolbar.component.ts

@@ -12,7 +12,7 @@ import { timer } from 'rxjs';
 
 import { NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, DestroyRef, effect, inject, input, signal } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
@@ -29,7 +29,7 @@ import {
   MyResourcesSelectors,
   RemoveResourceFromBookmarks,
 } from '@osf/shared/stores';
-import { hasViewOnlyParam } from '@shared/helpers';
+import { hasViewOnlyParam, IS_SMALL } from '@shared/helpers';
 
 import { SocialsShareActionItem } from '../../models';
 import { DuplicateDialogComponent } from '../duplicate-dialog/duplicate-dialog.component';
@@ -66,6 +66,7 @@ export class OverviewToolbarComponent {
   destroyRef = inject(DestroyRef);
   isPublic = signal(false);
   isBookmarked = signal(false);
+  isMobile = toSignal(inject(IS_SMALL));
 
   isCollectionsRoute = input<boolean>(false);
   canEdit = input.required<boolean>();
@@ -144,6 +145,7 @@ export class OverviewToolbarComponent {
   handleToggleProjectPublicity(): void {
     const resource = this.currentResource();
     if (!resource) return;
+    const dialogWidth = this.isMobile() ? '95vw' : '600px';
 
     const isCurrentlyPublic = resource.isPublic;
     const newPublicStatus = !isCurrentlyPublic;
@@ -154,7 +156,7 @@ export class OverviewToolbarComponent {
 
     this.dialogService.open(TogglePublicityDialogComponent, {
       focusOnShow: false,
-      width: '40vw',
+      width: dialogWidth,
       header: this.translateService.instant(
         isCurrentlyPublic ? 'project.overview.dialog.makePrivate.header' : 'project.overview.dialog.makePublic.header'
       ),

src/app/features/project/overview/components/toggle-publicity-dialog/toggle-publicity-dialog.component.html

@@ -1,11 +1,13 @@
 <div class="dialog-container">
   <div [innerHTML]="messageKey() | translate"></div>
-  <div class="flex mt-6 gap-3 justify-content-end">
+  <div class="flex mt-5 gap-3 justify-content-between md:justify-content-end">
     <p-button
       [label]="'project.overview.dialog.makePublic.cancelButton' | translate"
       severity="info"
       (onClick)="dialogRef.close()"
       [disabled]="isSubmitting()"
+      styleClass="w-full"
+      class="w-full md:w-auto"
     />
     <p-button
       [label]="
@@ -16,6 +18,8 @@
       (onClick)="toggleProjectPublicity()"
       [disabled]="isSubmitting()"
       [loading]="isSubmitting()"
+      styleClass="w-full"
+      class="w-full md:w-auto"
     />
   </div>
 </div>