flow: ui

packages/topdown/src/persea/controllers/room/component.module.scss

@@ -21,9 +21,14 @@
   }
   @media (min-width: 60rem) {
     display: flex;
-    .side, .stage {
+    .stage {
+      margin: 1rem 0 1rem 1rem;
       height: calc(100% - 2rem);
-      width: calc(50% - 2rem);
+      width: calc(50% - 1rem);
+    }
+    .side {
+      height: calc(100% - 2rem);
+      width: 50%;
     }
   }
 }

packages/topdown/src/persea/room-sides/entities-side/index.jsx

@@ -141,7 +141,6 @@ function EntitiesPage({
   return (
     <div className={locals['entities-page']}>
       <div className={classnames('label', locals.label)}>
-        <div>Entities</div>
         <div className={locals.list}>{names}</div>
       </div>
       <EntityController.Component

packages/topdown/src/persea/room-sides/tiles-side/index.jsx

@@ -219,7 +219,6 @@ function TilesPage({
   return (
     <div className={classnames(styles.tilesPage, {[styles.holding]: isHolding})}>
       <div className={classnames('label', styles.label)}>
-        <div>Tiles</div>
         <ul>
           {
             resource.tiles.map((tiles, i) => (
@@ -294,6 +293,20 @@ function TilesPage({
                 </select>
               </label>
             </div>
+            {2 === tilesetMode && (
+              <div className={styles.fillType}>
+                <label>
+                  <span>Fill type</span>
+                  <div>
+                    <select>
+                      <option>Tiling</option>
+                      <option>Random</option>
+                    </select>
+                  </div>
+                </label>
+              </div>
+            )}
+            <div className={styles.grower} />
             <div className={styles.scale}>
               <label>
                 <span>Scale</span>

packages/topdown/src/persea/room-sides/tiles-side/index.module.scss

@@ -16,11 +16,7 @@
     font-size: 0.6em;
     font-weight: bold;
     margin-bottom: 1em;
-    // text-align: center;
-    // text-orientation: mixed;
     text-transform: uppercase;
-    // writing-mode: vertical-rl;
-    // width: 1rem;
   }
 }
 
@@ -57,9 +53,10 @@
 
 .header {
   display: flex;
+  flex-wrap: wrap;
 }
 
-.brushes {
+.grower {
   flex-grow: 100;
 }