Fix: Assign Books to Shelves popup visually broken (#1783)

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

@@ -19,13 +19,9 @@ export class BookDialogHelperService {
       showHeader: false,
       modal: true,
       closable: true,
-      contentStyle: {overflow: 'auto'},
+      contentStyle: {overflow: 'hidden'},
       styleClass: 'dynamic-dialog-minimal',
       baseZIndex: 10,
-      style: {
-        position: 'absolute',
-        top: '15%',
-      },
       data: {
         isMultiBooks: true,
         bookIds,

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

@@ -466,13 +466,9 @@ export class BookCardComponent implements OnInit, OnChanges, OnDestroy {
       modal: true,
       dismissableMask: true,
       closable: true,
-      contentStyle: {overflow: 'auto'},
+      contentStyle: {overflow: 'hidden'},
       styleClass: 'dynamic-dialog-minimal',
       baseZIndex: 10,
-      style: {
-        position: 'absolute',
-        top: '15%',
-      },
       data: {
         book: this.book,
       },

booklore-ui/src/app/features/book/components/shelf-assigner/shelf-assigner.component.scss

@@ -92,12 +92,13 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  padding: 1.75rem;
+  padding: 1rem 2rem;
   background: var(--card-background);
   border: 1px solid var(--border-color);
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
   min-height: 350px;
   max-height: 450px;
+  overflow: hidden;
 
   @media (max-width: 480px) {
     padding: 1rem;
@@ -111,6 +112,7 @@
   flex-direction: column;
   gap: 0.75rem;
   height: 100%;
+  overflow: hidden;
 }
 
 .list-header {
@@ -146,10 +148,11 @@
 .shelves-grid {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.75rem;
   overflow-y: auto;
   flex: 1;
   padding-right: 0.25rem;
+  min-height: 0;
 
   &::-webkit-scrollbar {
     width: 6px;
@@ -178,7 +181,7 @@
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  padding: 0.75rem;
+  padding: 0.5rem 1rem;
   background: var(--ground-background);
   border: 1px solid var(--border-color);
   border-radius: 8px;
@@ -225,8 +228,8 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 38px;
-      height: 38px;
+      width: 34px;
+      height: 34px;
       background: var(--overlay-background);
       border-radius: 8px;
       flex-shrink: 0;

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

@@ -431,9 +431,8 @@ export class MetadataViewerComponent implements OnInit, OnChanges {
       dismissableMask: true,
       modal: true,
       closable: true,
-      contentStyle: {overflow: 'auto'},
+      contentStyle: {overflow: 'hidden'},
       baseZIndex: 10,
-      style: {position: 'absolute', top: '15%'},
       data: {book: this.bookService.getBookByIdFromState(bookId)}
     });
   }