2 files changed, 15 insertions, 13 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 19c9838..1790dc3 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -55,20 +55,22 @@ export default defineComponent({
 		class="hover:cursor-pointer w-full h-full bg-cover" @click="onImgClick"
 		/>
 	<div v-else>
-		<div v-if="(tree.headerSz && !tree.sideArea) || (tree.sideArea && tree.sideArea.sweptLeft)"
+		<div v-if="(tree.headerSz && !tree.sepSweptArea) || (tree.sepSweptArea && tree.sepSweptArea.sweptLeft)"
 			:style="{height: tree.headerSz+'px'}"
 			class="text-center hover:cursor-pointer bg-stone-300" @click="onHeaderClick">
 			{{tree.tolNode.name}}
 		</div>
-		<div v-if="tree.sideArea"
-			:style="{position: 'absolute', left: tree.sideArea.x+'px', top: tree.sideArea.y+'px',
-				width: (tree.sideArea.w + (tree.sideArea.sweptLeft ? tree.sideArea.extraSz : 0))+'px',
-				height: (tree.sideArea.h + (tree.sideArea.sweptLeft ? 0 : tree.sideArea.extraSz))+'px',
-				borderRightColor: (tree.sideArea.sweptLeft ? 'white' : 'currentColor'),
-				borderBottomColor: (tree.sideArea.sweptLeft ? 'currentColor' : 'white'),
+		<div v-if="tree.sepSweptArea"
+			:style="{position: 'absolute', left: tree.sepSweptArea.x+'px', top: tree.sepSweptArea.y+'px',
+				width: (tree.sepSweptArea.w +
+					(tree.sepSweptArea.sweptLeft ? tree.sepSweptArea.tileSpacing+1 : 0))+'px',
+				height: (tree.sepSweptArea.h +
+					(tree.sepSweptArea.sweptLeft ? 0 : tree.sepSweptArea.tileSpacing+1))+'px',
+				borderRightColor: (tree.sepSweptArea.sweptLeft ? 'white' : 'currentColor'),
+				borderBottomColor: (tree.sepSweptArea.sweptLeft ? 'currentColor' : 'white'),
 				transitionDuration: transitionDuration+'ms'}"
 			class="transition-[left,top,width,height] ease-out border border-stone-900 bg-white">
-			<div v-if="!tree.sideArea.sweptLeft" :style="{height: tree.headerSz+'px'}"
+			<div v-if="!tree.sepSweptArea.sweptLeft" :style="{height: tree.headerSz+'px'}"
 				class="text-center hover:cursor-pointer bg-stone-300" @click="onHeaderClick">
 				{{tree.tolNode.name}}
 			</div>
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index ce2688e..24d0d84 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -89,16 +89,16 @@ export default defineComponent({
 			tree.headerSz = layout.headerSz;
 			layout.children.forEach((n,i) => this.applyLayout(n, tree.children[i]));
 			//handle case where leaf nodes placed in leftover space from parent-sweep
-			if (layout.sideArea != null){
+			if (layout.sepSweptArea != null){
 				//add parent area coords
-				tree.sideArea = layout.sideArea;
+				tree.sepSweptArea = layout.sepSweptArea;
 				//move leaf node children to parent area
 				tree.children.filter(n => n.children.length == 0).map(n => {
-					n.x += layout.sideArea!.x;
-					n.y += layout.sideArea!.y;
+					n.x += layout.sepSweptArea!.x;
+					n.y += layout.sepSweptArea!.y;
 				});
 			} else {
-				tree.sideArea = null;
+				tree.sepSweptArea = null;
 			}
 		}
 	},