Fix long dropdown contents break column layout

diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index b79e56ca08ff1ab4135a9f4ee98358d62b83bec3..d824f6921f4db7e6fe37699fbad5e5baa514a1d8 100644 (file)
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -63,7 +63,7 @@
 
 
 <div class="row">
-    <div class="col mb-4">
+    <div class="col-md-6 col-xl-4 mb-4">
 
         <form [formGroup]='documentForm' (ngSubmit)="save()">
 

diff --git a/src-ui/src/app/components/document-detail/document-detail.component.scss b/src-ui/src/app/components/document-detail/document-detail.component.scss
index 71d50ca61a82b91d94cd11a26e92c15b9c23edf3..76b834bc94b8f7385f68c9878ed315fd02d2a8fb 100644 (file)
--- a/src-ui/src/app/components/document-detail/document-detail.component.scss
+++ b/src-ui/src/app/components/document-detail/document-detail.component.scss
@@ -22,6 +22,10 @@
   --page-margin: 1px 0 20px;
 }
 
+::ng-deep .ng-select-taggable {
+  max-width: calc(100% - 46px); // fudge factor for ng-select button width
+}
+
 .password-prompt {
   position: absolute;
   top: 30%;