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>