Fix vertical overflow on metadata edit form dialog: part deux (#1816)

* Fix display overflow on metadata edit form dialog

* More fixes to books in dialog mode

booklore-ui/src/app/features/book/components/book-browser/book-card/book-card.component.ts

@@ -179,19 +179,7 @@ export class BookCardComponent implements OnInit, OnChanges, OnDestroy {
         icon: 'pi pi-info-circle',
         command: () => {
           setTimeout(() => {
-            if (this.metadataCenterViewMode === 'route') {
-              this.router.navigate(['/book', this.book.id], {
-                queryParams: {tab: 'view'}
-              });
-            } else {
-              this.dialogService.open(BookMetadataCenterComponent, {
-                width: '95%',
-                data: {bookId: this.book.id},
-                modal: true,
-                dismissableMask: true,
-                showHeader: false
-              });
-            }
+            this.openBookInfo(this.book);
           }, 150);
         },
       },
@@ -502,13 +490,16 @@ export class BookCardComponent implements OnInit, OnChanges, OnDestroy {
     } else {
       this.dialogService.open(BookMetadataCenterComponent, {
         width: '90%',
+        height: '90%',
         data: {bookId: book.id},
         modal: true,
-        dismissableMask: false,
+        dismissableMask: true,
         showHeader: true,
         closable: true,
         closeOnEscape: true,
-        maximizable: true,
+        draggable: false,
+        maximizable: false,
+        resizable: false,
         header: 'Book Details',
         styleClass: 'book-details-dialog'
       });

booklore-ui/src/app/features/metadata/component/book-metadata-center/book-metadata-center.component.scss

@@ -1,9 +1,30 @@
-.tabpanels-responsive {
+::ng-deep .layout-main .tabpanels-responsive {
   height: calc(100dvh - 9.7rem);
 }
 
 @media (max-width: 768px) {
-  .tabpanels-responsive {
+  ::ng-deep .layout-main .tabpanels-responsive {
     height: calc(100dvh - 8.5rem);
   }
 }
+
+::ng-deep .book-details-dialog .p-dialog-content,
+::ng-deep .book-details-dialog app-book-metadata-center,
+::ng-deep .book-details-dialog app-book-metadata-center > div,
+::ng-deep .book-details-dialog app-book-metadata-center p-tabs {
+  display: flex;
+  width: 100%;
+}
+
+::ng-deep .book-details-dialog p-tablist {
+  flex-shrink: 0;
+}
+
+::ng-deep .book-details-dialog .p-dialog-content {
+  padding: 0;
+}
+
+::ng-deep .book-details-dialog app-book-metadata-center > div {
+  border-radius: 0 0 0.75rem 0.75rem !important;
+  border-width: 1px 0 0 !important;
+}

booklore-ui/src/app/features/metadata/component/book-metadata-center/metadata-editor/metadata-editor.component.scss

@@ -19,7 +19,19 @@
 }
 
 ::ng-deep .p-autocomplete-input-chip {
-  width: 7rem;
+  width: 2rem;
+}
+
+::ng-deep .p-autocomplete-clearable ul {
+  padding-inline-end: 2rem !important;
+}
+
+::ng-deep .p-autocomplete-clearable .p-autocomplete-clear-icon {
+  right: 0px;
+  margin-top: -1rem;
+  width: 2rem;
+  height: 2rem;
+  padding: 0.5rem;
 }
 
 ::ng-deep .withbutton input,

booklore-ui/src/app/features/metadata/component/book-metadata-center/metadata-searcher/metadata-searcher.component.html

@@ -1,5 +1,5 @@
 @if (selectedFetchedMetadata$ | async; as selectedFetchedMetadata) {
-  <div class="h-full w-full flex-auto min-w-[80rem]">
+  <div class="h-full w-full flex-auto">
     <app-metadata-picker
       [fetchedMetadata]="selectedFetchedMetadata"
       [book$]="book$"
@@ -7,7 +7,7 @@
     </app-metadata-picker>
   </div>
 } @else {
-  <form class="flex flex-col w-full h-full pt-2 min-w-full md:min-w-[60rem] pr-0 md:pr-2 pl-0 md:pl-2" [formGroup]="form" (ngSubmit)="onSubmit()">
+  <form class="flex flex-col w-full h-full pt-2 min-w-full pr-0 md:pr-2 pl-0 md:pl-2" [formGroup]="form" (ngSubmit)="onSubmit()">
 
     <div class="flex flex-col space-y-3">
       <div class="grid grid-cols-1 md:flex md:flex-row w-full gap-2 md:gap-4 md:items-end">
@@ -82,7 +82,7 @@
         </div>
       }
       @if (allFetchedMetadata.length > 0) {
-        <div class="mt-4 md:mt-8 flex-1 overflow-y-auto">
+        <div class="mt-4 md:mt-8 flex-1">
           @for (metadata of allFetchedMetadata; track metadata) {
             <div class="book-item flex flex-col w-full">
               <div class="flex flex-row w-full book-item-content cursor-pointer" (click)="onBookClick(metadata)">