More fixes to the layout regression. The appbar behaves differently...

...based on which view you're in.

packages/gallery/src/interface/allImages.js

@@ -6,7 +6,8 @@ import {
 	defineView,
 	nodeParentWithType,
 	defineView as vw,
-	defineElement as el
+	defineElement as el,
+	injectView as iv
 } from '../utils/domvm.js';
 
 import { error } from '../services/console.js';
@@ -26,7 +27,7 @@ export function uploadImages(evt, files) {
 }
 
 export function AllImagesView(vm, params, key, context) {
-	const { appbar } = context;
+	const { appbar, appbarView } = context;
 	const model = prop({}, pouchDocHash);
 	const images = container([], pouchDocArrayHash);
 
@@ -202,12 +203,13 @@ export function AllImagesView(vm, params, key, context) {
 	return function() {
 		return allImagesContainer(
 			{
-				class: 'allImages',
+				class: 'allImages'
-				onscroll: handleContentScroll
 			},
 			[
+				iv(appbarView),
 				allImagesContent(
 					{
+						onscroll: handleContentScroll,
 						onclick: {
 							'.photoSelect .icon svg path': toggleSelect,
 							'.photoSelect .icon': toggleSelect,
@@ -237,11 +239,10 @@ const uploadButton = styled(
 	CLICKABLE
 );
 
-const allImagesContainer = styled(
+const allImagesContainer = styled(FILL_STYLE);
+const allImagesContent = styled(
 	{
-		overflow: 'scroll',
+		overflow: 'scroll'
-		marginTop: '58px'
 	},
 	FILL_STYLE
 );
-const allImagesContent = styled({});

packages/gallery/src/interface/focus.js

@@ -5,7 +5,8 @@ import {
 	defineView,
 	nodeParentWithType,
 	fullViewportSize,
-	defineElement as el
+	defineElement as el,
+	injectView as iv
 } from '../utils/domvm.js';
 
 import { router } from '../services/router.js';
@@ -16,9 +17,9 @@ import { Overlay } from './components/overlay.js';
 import { Icon } from './components/icon.js';
 import { styled, injectStyle } from '../services/style.js';
 import { error } from '../services/console.js';
-import { CLICKABLE } from './styles.js';
+import { CLICKABLE, FILL_STYLE } from './styles.js';
 
-export function FocusView(vm, params, key, { appbar }) {
+export function FocusView(vm, params, key, { appbar, appbarView }) {
 	const id = prop();
 	const doc = prop(null, pouchDocHash);
 	const { body } = document;
@@ -120,26 +121,29 @@ export function FocusView(vm, params, key, { appbar }) {
 		}
 
 		return focusContainer({ class: 'focus' }, [
-			prevLink()
+			iv(appbarView),
-				? prevClickZone({ href: prevLink() }, [
+			focusContent([
-						Icon({
+				prevLink()
-							name: 'chevron_left',
+					? prevClickZone({ href: prevLink() }, [
-							size: 0.75
+							Icon({
-						})
+								name: 'chevron_left',
-				  ])
+								size: 0.75
-				: null,
+							})
-			AttachmentImageView({
+					  ])
-				src: _id ? doc().sizes.full : null,
+					: null,
-				style: imageStyle()
+				AttachmentImageView({
-			}),
+					src: _id ? doc().sizes.full : null,
-			nextLink()
+					style: imageStyle()
-				? nextClickZone({ href: nextLink() }, [
+				}),
-						Icon({
+				nextLink()
-							name: 'chevron_right',
+					? nextClickZone({ href: nextLink() }, [
-							size: 0.75
+							Icon({
-						})
+								name: 'chevron_right',
-				  ])
+								size: 0.75
-				: null
+							})
+					  ])
+					: null
+			])
 		]);
 	};
 }
@@ -169,12 +173,22 @@ const trashButtonContainer = styled(
 	CLICKABLE
 );
 
-const focusContainer = styled({
+const focusContainer = styled(
-	display: 'flex',
+	{
+		display: 'flex',
+		overflow: 'hidden',
+		flexDirection: 'column',
+		alignItems: 'center'
+	},
+	FILL_STYLE
+);
+
+const focusContent = styled({
 	flex: 1,
-	justifyContent: 'center',
+	overflow: 'hidden',
-	alignItems: 'center',
+	display: 'flex',
-	overflow: 'hidden'
+	flexDirection: 'column',
+	justifyContent: 'center'
 });
 
 const nextClickZone = styled(

packages/gallery/src/interface/gallery.js

@@ -5,8 +5,7 @@ import {
 	renderSwitch,
 	defineView as vw,
 	createView as cv,
-	defineElement as el,
+	defineElement as el
-	injectView as iv
 } from '../utils/domvm.js';
 import { ImageType } from '../data/image.js';
 import { AlbumType } from '../data/album.js';
@@ -22,10 +21,11 @@ import { FILL_STYLE } from './styles.js';
 
 export function GalleryView(vm) {
 	const context = {};
-	const appbar = cv(AppBarView, {}, 'appbar', context);
 	const routeName = prop();
 	const routeParams = prop();
 
+	context.appbarView = cv(AppBarView, {}, 'appbar', context);
+
 	routeChanged.subscribe(function onRouteChange(name, params) {
 		routeName(name);
 		routeParams(params);
@@ -34,7 +34,6 @@ export function GalleryView(vm) {
 
 	function renderMain() {
 		return [
-			iv(appbar),
 			content([
 				renderSwitch(
 					{