chore: ui tweak

src/atlasViewer/atlasViewer.component.ts

@@ -39,7 +39,6 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
   @ViewChild('cookieAgreementComponent', {read: TemplateRef}) cookieAgreementComponent : TemplateRef<any>
   @ViewChild('kgToS', {read: TemplateRef}) kgTosComponent: TemplateRef<any>
   @ViewChild(LayoutMainSide) layoutMainSide: LayoutMainSide
-  @ViewChild('dockedContainer', {read: ViewContainerRef}) dockedContainer: ViewContainerRef
 
   @ViewChild(NehubaContainer) nehubaContainer: NehubaContainer
 
@@ -338,7 +337,6 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
         }
       })
     })
-    this.widgetServices.dockedContainer = this.dockedContainer
 
     this.onhoverSegmentForFixed$ = this.rClContextualMenu.onShow.pipe(
       withLatestFrom(this.onhoverSegment$),

src/atlasViewer/atlasViewer.template.html

@@ -38,8 +38,8 @@
                 <layer-browser></layer-browser>
               </div>
             </panel-component>
-            <ng-template #dockedContainer>
-            </ng-template>
+            <div dockedContainerDirective>
+            </div>
           </tab>
         </tabset>
   

src/components/dropdown/dropdown.style.css

@@ -56,24 +56,3 @@ radio-list
   overflow-x:hidden;
   display:block;
 }
-
-.drop-down-open-dark {
-  border-width: 1px 1px 0 1px;
-  border-style: solid;
-  border-color: white
-}
-.drop-down-open-light {
-  border-width: 1px 1px 0 1px solid black;
-  border-style: solid;
-  border-color: black;
-}
-.drop-down-closed-dark {
-  border-width: 1px;
-  border-style: solid;
-  border-color: white
-}
-.drop-down-closed-light {
-  border: 1px;
-  border-style: solid;
-  border-color: black
-}
\ No newline at end of file

src/components/dropdown/dropdown.template.html

+<!-- TODO remove dependency on ismobile -->
 <span
   class = "btn btn-default"
   [innerHTML] = "activeDisplay(selectedItem)"
@@ -5,18 +6,18 @@
   #dropdownToggle
   dropdownToggle
               
-  [ngStyle]="{'border': isMobile? '1px solid' : 'none', 'border-color': darktheme? 'white' : 'black', 'border-width': openState? '1px 1px 0 1px' : ''}">
+  [ngStyle]="{'border': isMobile? 'none' : 'none', 'border-color': darktheme? 'white' : 'black', 'border-width': openState? '1px 1px 0 1px' : ''}">
 
 </span>
 
 <!-- needed to ensure dropdown width matches  -->
-<ul class="m-0 h-0 o-h">
+<ul class="m-0 h-0 overflow-hidden">
   <li *ngFor="let item of inputArray">
     {{ listDisplay(item) }}
   </li>
 </ul>
 <radio-list
-  [ulClass]="'dropdown-menu'"
+  [ulClass]="'dropdown-menu shadow'"
   (itemSelected)="itemSelected.emit($event)"
   [listDisplay]="listDisplay"
   [selectedItem]="selectedItem"

src/components/radiolist/radiolist.style.css

@@ -55,8 +55,3 @@ ul,span.dropdown-item-1
   white-space: nowrap;
   border:none;
 }
-
-.radioListBorder {
-  border-style: solid;
-  border-width: 0px 1px 1px 1px;
-}
\ No newline at end of file

src/components/radiolist/radiolist.template.html

 <ul
-  [ngClass]="[ulClass, isMobile? 'radioListBorder' : '']"
+  [ngClass]="ulClass"
   [ngStyle]="{'opacity': isMobile? '1' : '0.8', 'border-color': darktheme? 'white' : 'black'}"
   role="menu">
   <li 

src/res/css/extra_styles.css

@@ -306,11 +306,6 @@ markdown-dom pre code
   transition: all ease 500ms;
 }
 
-.o-h
-{
-  overflow:hidden;
-}
-
 .h-0
 {
   height: 0px;

src/ui/databrowserModule/databrowser/databrowser.template.html

@@ -15,11 +15,11 @@
           Datasets relevant to
           <span
             *ngFor="let region of regions"
-            class="badge badge-secondary mr-1">
+            class="badge badge-secondary mr-1 mw-100">
             <span [ngStyle]="{backgroundColor:getBackgroundColorStyleFromRegion(region)}" class="dot">
               
             </span>
-            <span>
+            <span class="d-inline-block mw-100 overflow-hidden text-truncate">
               {{ region.name }}
             </span>
           </span>
@@ -118,13 +118,14 @@
           [dataset]="dataset">
           <div regionTagsContainer>
 
+            <!-- TODO may want to separate the region badge into a separate component -->
             <span
               *ngFor="let region of dataset.parcellationRegion"
-              class="badge badge-secondary mr-1">
+              class="badge badge-secondary mr-1 mw-100">
               <span [ngStyle]="{backgroundColor:getBackgroundColorStyleFromRegion(region)}" class="dot">
                 
               </span>
-              <span>
+              <span class="d-inline-block mw-100 overflow-hidden text-truncate">
                 {{ region.name }}
               </span>
             </span>