diff --git a/src/components/dropdown/dropdown.template.html b/src/components/dropdown/dropdown.template.html
index e448400b8324b98dcfc159263517856732694cfc..d40112b4cabbfe292a7bf9834dea71ad660a221f 100644
--- a/src/components/dropdown/dropdown.template.html
+++ b/src/components/dropdown/dropdown.template.html
@@ -1,8 +1,8 @@
 <!-- TODO remove dependency on ismobile -->
 <span
-  class = "btn btn-default"
-  [innerHTML] = "activeDisplay(selectedItem)"
-  hoverable
+  class="btn btn-default"
+  [innerHTML]="activeDisplay(selectedItem)"
+  [hoverable]="{translateY:-2}"
   #dropdownToggle
   dropdownToggle
               
@@ -23,7 +23,7 @@
   [selectedItem]="selectedItem"
   [inputArray]="inputArray"
   [@showState]="openState ? 'show' : 'hide'"
-  [isMobile] = "isMobile"
-  [darktheme] = "darktheme">
+  [isMobile]="isMobile"
+  [darktheme]="darktheme">
 
 </radio-list>
diff --git a/src/components/hoverableBlock.directive.ts b/src/components/hoverableBlock.directive.ts
index e05dc260d0f2693500c98318b5deb2c7350c56d3..bc0da29e43f6b99d73108d3db6f63633a659e922 100644
--- a/src/components/hoverableBlock.directive.ts
+++ b/src/components/hoverableBlock.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, HostListener, HostBinding } from "@angular/core";
+import { Directive, HostListener, HostBinding, Input } from "@angular/core";
 import { DomSanitizer } from "@angular/platform-browser";
 
 @Directive({
@@ -15,6 +15,26 @@ import { DomSanitizer } from "@angular/platform-browser";
 
 export class HoverableBlockDirective{
 
+  @Input('hoverable')
+  config:any = {
+    disable: false,
+    translateY: -5
+  }
+
+  private _disable = false
+  private _translateY = -5
+
+  ngOnChanges(){
+    this._disable = this.config && !!this.config.disable
+    /**
+     * 0 is evaluated as falsy, but a valid number
+     * conditional tests for whether we need to fall back to default
+     */
+    this._translateY = this.config && this.config.translateY !== 0 && !!Number(this.config.translateY)
+      ? Number(this.config.translateY)
+      : -5
+  }
+
   @HostBinding('style.opacity')
   opacity : number = 0.9
 
@@ -26,13 +46,19 @@ export class HoverableBlockDirective{
 
   @HostListener('mouseenter')
   onMouseenter(){
+    if (this._disable) return
     this.opacity = 1.0
     this.boxShadow = this.sanitizer.bypassSecurityTrustStyle(`0 4px 6px 0 rgba(5,5,5,0.25)`)
-    this.transform = this.sanitizer.bypassSecurityTrustStyle(`translateY(-2%)`)
+    /**
+     * n.b. risk of XSS. But sincle translate Y is passed through Number, and corerced into a number,
+     * and using 5 as a fallback, it should be safe
+     */
+    this.transform = this.sanitizer.bypassSecurityTrustStyle(`translateY(${this._translateY}px)`)
   }
 
   @HostListener('mouseleave')
   onmouseleave(){
+    if (this._disable) return
     this.opacity = 0.9
     this.boxShadow = this.sanitizer.bypassSecurityTrustStyle(`0 4px 6px 0 rgba(5,5,5,0.1)`)
     this.transform = this.sanitizer.bypassSecurityTrustStyle(`translateY(0px)`)
diff --git a/src/components/panel/panel.template.html b/src/components/panel/panel.template.html
index a510270894b020794b9f010fc683d7c1ce27ab4c..d2c55e22b6daed1c0b223e86492e6429e34a143d 100644
--- a/src/components/panel/panel.template.html
+++ b/src/components/panel/panel.template.html
@@ -11,7 +11,7 @@
       *ngIf="showHeading"
       class="l-card-title"
       (click)="toggleCollapseBody($event)"
-      hoverable>
+      [hoverable]="{disable:!bodyCollapsable}">
       <ng-content select="[heading]">
       </ng-content>
     </div>
diff --git a/src/components/readmoore/readmore.template.html b/src/components/readmoore/readmore.template.html
index 8572b5e2e175f1d3e068a989f6c6ddd9f7e4c75f..20fdb98aeca3cfb760d23090d3cde70888b5c63c 100644
--- a/src/components/readmoore/readmore.template.html
+++ b/src/components/readmoore/readmore.template.html
@@ -9,7 +9,7 @@
 <div 
   (click)="toggle($event)" 
   sliver
-  hoverable>
+  [hoverable]="{translateY:-1}">
 
   <i 
     [ngClass] = "show ? 'fa-chevron-up' : 'fa-chevron-down'"