diff --git a/src/mol-plugin/layout.ts b/src/mol-plugin/layout.ts
index c57d11a619bac697137ecccc2d938ba5ede6fffe..346e6c92c99a79413d2046b8638ef71ca1f375a8 100644
--- a/src/mol-plugin/layout.ts
+++ b/src/mol-plugin/layout.ts
@@ -10,13 +10,12 @@ import { PluginComponent } from './component';
 import { PluginContext } from './context';
 import { PluginCommands } from './command';
 
-// TODO: support collapsed state control orientation
+export type PluginLayoutControlsDisplay = 'outside' | 'portrait' | 'landscape' | 'reactive'
 export const PluginLayoutStateParams = {
     isExpanded: PD.Boolean(false),
     showControls: PD.Boolean(true),
-    outsideControls: PD.Boolean(true, { isHidden: true })
+    controlsDisplay: PD.Value<PluginLayoutControlsDisplay>('outside', { isHidden: true })
 }
-
 export type PluginLayoutStateProps = PD.Values<typeof PluginLayoutStateParams>
 
 interface RootState {
diff --git a/src/mol-plugin/skin/base/layout.scss b/src/mol-plugin/skin/base/layout.scss
index 8f05c4dabcfa75de561df363891298325c8af415..b10a90baafb74d215ec1a9fdb88d64c8da4dbb1b 100644
--- a/src/mol-plugin/skin/base/layout.scss
+++ b/src/mol-plugin/skin/base/layout.scss
@@ -3,27 +3,39 @@
 
 .msp-layout-standard-outside {
     position: absolute;
-    @import 'layout/controls-outside';    
+    @import 'layout/controls-outside';
 }
 
 .msp-layout-standard-landscape {
     position: absolute;
-    @import 'layout/controls-landscape';    
+    @import 'layout/controls-landscape';
 }
 
 .msp-layout-standard-portrait {
     position: absolute;
-    @import 'layout/controls-portrait';    
+    @import 'layout/controls-portrait';
 }
 
-.msp-layout-expanded {    
+.msp-layout-standard-reactive {
+    position: absolute;
+
+    @media (orientation:landscape) {
+        @import 'layout/controls-landscape';
+    };
+
+    @media (orientation:portrait) {
+        @import 'layout/controls-portrait';
+    };
+}
+
+.msp-layout-expanded {
     position: fixed;
-        
+
     @media (orientation:landscape) {
         @import 'layout/controls-landscape';
-    };     
-    
+    };
+
     @media (orientation:portrait) {
         @import 'layout/controls-portrait';
-    }  ;
+    };
 }
\ No newline at end of file
diff --git a/src/mol-plugin/ui/plugin.tsx b/src/mol-plugin/ui/plugin.tsx
index b1b451881be136ab95096bc9dfb55751728ef7fa..ca22c0089d40d3e9ee35d9393fc95d00b2b671d0 100644
--- a/src/mol-plugin/ui/plugin.tsx
+++ b/src/mol-plugin/ui/plugin.tsx
@@ -93,12 +93,7 @@ class Layout extends PluginUIComponent {
         if (layout.isExpanded) {
             classList.push('msp-layout-expanded')
         } else {
-            classList.push('msp-layout-standard')
-            if (layout.outsideControls) {
-                classList.push('msp-layout-standard-outside')
-            } else {
-                classList.push('msp-layout-standard-landscape')
-            }
+            classList.push('msp-layout-standard', `msp-layout-standard-${layout.controlsDisplay}`)
         }
 
         return classList.join(' ')